我正在使用jquery从我页面上帖子中的图像中获取img标题属性。 默认情况下，图像始终包装在<p>标签中，并具有不同类型的浮动。
我的解决方案是获取图像样式并将其添加到相应的<small>标签中，然后使用 cssposition正确align它。
我花了两个小时尝试不同的方法，现在我别无选择。 有人可以帮助我吗？
这是我现在的代码。
$("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>我认为您最好将浮点样式添加到.imgWrapper元素并从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>在imgWrapper上，您可以添加一个display: flex;和一个flex-direction: column;，如果您正在寻找，则会将文本放在图像下方。