在图片下方添加说明的最佳方式是什么?图片及其标题将向右浮动,标题上的文本需要换行——200x200 像素的图片不应该有宽度为 800 像素的标题。
我非常希望有一种解决方案允许我在不更改 CSS 或标记的情况下更新图像(具有不同宽度)。
由于我无法控制的原因,图像本身也会向右浮动,但这应该不会有太大问题。
图片代码为
<div class="floatright">
<img alt="foo" src="bar.png" height="490" border="0" width="800">
</div>
我可以根据需要用 HTML/CSS 包装它。此页面上没有 JS。
最佳答案
figure {
display: table;
}
figcaption {
display: table-caption;
caption-side: bottom;
}
<figure>
<img src="https://picsum.photos/200/50" />
<figcaption>This is a caption of slightly longer length. It should wrap, regardless of the size of the image.</figcaption>
</figure>
您可以用 figure
和 figcaption
替换 div
和 p
,或者任何其他容器让您的语义船漂浮.
无耻插件:我在博客上写了这个问题和my solution here ,如果您有兴趣的话。
关于html - 图片说明和包装,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6523560/