在图像下方添加标题的最佳方法是什么？图像及其标题将向右浮动,标题上的文字需要换行 – 200x200px图像的标题宽度不应为800px.
我非常喜欢一种允许我更新图像(具有不同宽度)而无需更改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="http://lorempixel.com/300/100/" /> <figcaption>This is a caption of slightly longer length. It should wrap,regardless of the size of the image.</figcaption> </figure>
你可以用div和p替换figure和figcaption,或者用其他任何容器代替浮动你的语义船.
无耻的插件：如果你有兴趣,我在博客上写了这个问题和my solution here.
