I think you would be better adding the float styles to the .imgWrapper element and removing the float from the img.
$("p img").each(function(index, element) {
$(element).wrap(`<div class='imgWrapper' style="${element.style.cssText}"></div>`);
});
$('img[title], img[style]').after(function() {
var el = `<small style="${this.style.cssText}">${this.title}</small>`;
$(this).css("float", "");
return el;
});
.container{
margin: 0px 100px;
}
.imgWrapper img {
display: block;
}
img{
border: 1px solid #000;
}
img + small {
color: #C00;
display: block;
}
small{
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="custom.css">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
<img style="float: right;" title="Some image title" src="img.jpg" alt="Some image alt" width="656" height="210" />
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
<p>
<img style="float: left;" title="Title title" src="img.jpg" alt="Title title alt" width="325" height="210" />
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
<p>
<img style="float: right;" title="titletitletitle" src="img.jpg" alt="titletitletitle alt" width="656" height="210" />
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
</div>
On your imgWrapper you can add a display: flex; and a flex-direction: column; and that will put the text under the image if that’s what you’re looking for.
I’m using jquery to grab the img title attribute from images in posts on my page.
The images are always wrapped in <p> tags by default and have different kinds of floats.
My solution was to grab the image style and add it to a corresponding <small> tag and then use a css position to align it correctly.
I have spent last two hours trying different approaches, and now I’m out of options.
Can someone help me with this?
here is my code as it stands now.
$("p img").each(function(index, element) {
$(element).wrap("<div class='imgWrapper'></div>");
});
$('img[title], img[style]').after(function() {
return `<small style="${this.style.cssText}">${this.title}</small>`;
});
.container{
margin: 0px 100px;
}
.imgWrapper{
}
img{
border: 1px solid #000;
}
img + small {
color: #C00;
display: block;
}
small{
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="custom.css">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
<img style="float: right;" title="Some image title" src="img.jpg" alt="Some image alt" width="656" height="210" />
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
<p>
<img style="float: left;" title="Title title" src="img.jpg" alt="Title title alt" width="325" height="210" />
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
<p>
<img style="float: right;" title="titletitletitle" src="img.jpg" alt="titletitletitle alt" width="656" height="210" />
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
</div>
It’s not clear what your question is. What is the expected results and what is currently not working? I setup a fiddle, fork it to illustrate the issue
