HTML – 图像标题和包装

发布时间：2020-12-14 21:14:14 所属栏目：资源来源：网络整理

导读：在图像下方添加标题的最佳方法是什么？图像及其标题将向右浮动,标题上的文字需要换行 – 200x200px图像的标题宽度不应为800px. 我非常喜欢一种允许我更新图像(具有不同宽度)而无需更改CSS或标记的解决方案. 由于我无法控制的原因,图像本身也会浮动,但这不应

在图像下方添加标题的最佳方法是什么？图像及其标题将向右浮动,标题上的文字需要换行 – 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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!