图片说明和包装

Question

在图片下方添加标题的最佳方式是什么？图片及其标题将向右浮动，标题上的文本需要换行 - 200x200 像素的图片不应有宽度为 800 像素的标题。

我强烈希望有一种解决方案，它允许我更新图像（具有不同宽度）而不更改 CSS 或标记。

由于我无法控制的原因，图像本身也会向右浮动，但这应该不会太成问题。

---

图片代码为

<div class="floatright">
  <img alt="foo" src="bar.png" height="490" border="0" width="800">
</div>

我可以根据需要用 HTML/CSS 包装它。此页面上没有 JS。

Answer 1

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。

Answer 2

纯 HTML/CSS 内联样式。

<div style="width:40%;
            margin-right:6%;
            float: left;">

  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
  <p style="color:gray; 
            background-color:#eee;
            margin-top:-4px;
            width:100%;
            height:auto;
            padding-top:10px;
            padding-bottom:10px;
            text-align:center;">

    <span style="padding-right:10px;
                 padding-left:10px;"> Butterfly </span></p>

</div>

<!-- NEXT ONE -->

<div style="width:40%;
            float: left;">

  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
  <p style="color:gray; 
            background-color:#eee;
            margin-top:-4px;
            width:100%;
            height:auto;
            padding-top:10px;
            padding-bottom:10px;
            text-align:center;">

    <span style="padding-right:10px;
                 padding-left:10px;"> Butterfly </span></p>

</div>

<div style="clear:all;"></div>

<!-- NEXT ROW -->


<div style="width:40%;
            margin-right:6%;
            float: left;">

  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
  <p style="color:gray; 
            background-color:#eee;
            margin-top:-4px;
            width:100%;
            height:auto;
            padding-top:10px;
            padding-bottom:10px;
            text-align:center;">

    <span style="margin-top:0px;
                 padding-right:10px;
                 padding-left:10px;"> Butterfly </span></p>

</div>

<!-- NEXT ONE -->

<div style="width:40%;
            float: left;">

  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
  <p style="color:gray; 
            background-color:#eee;
            margin-top:-4px;
            width:100%;
            height:auto;
            padding-top:10px;
            padding-bottom:10px;
            text-align:center;">

    <span style="padding-right:10px;
                 padding-left:10px;"> Butterfly </span></p>

</div>

<div style="clear:all; height:100px;">&nbsp;</div>

Answer 3

这是当前浏览器的一个已知问题。 atlavis 解决方案是最简单的。直到所有浏览器都实现了图形标签，Feeela 的方式才会奏效。但即便如此，它也不会向后兼容。我连续搜索了 3 天这个问题，我真的很讨厌那些让 CSS 决定剥离向后兼容的表格的人。

您可以在类上使用display: table-cell 属性。但 IE 6 或 7 不支持。

Answer 4

基本思想是用<img>标签和<p>标签制作一个<div>。

<div class="photo">
  <img src="someimage.jpg">
  <p>my caption
</div>

现在您只需设置两种样式。一个用于 img 标签，另一个用于 photo 类的 p 标签。

创建一个类命名它的照片：

.photo {float: right;width: 210px;margin: 0 10px 10px 10px;}
img.photo {float: right;margin-left: 10px;margin-bottom: 10px;border: 1px solid #666;

内边距：10px;}

结论： 1.一个带有<img>标签和<p>标签的div。 2. div 应该有一个类，<p> 和<img> 标签的样式不同。

Answer 5

您也可以使用HTML5 figure and figcaption elements 并按照@Wasim 的建议设置样式。

<figure>
    <img src="/test.jpg" alt="a test-image">
    <figcaption>Description</figcaption>
</figure>

另一种（不是跨浏览器的）方法是使用 img 标题属性并通过 CSS 将其作为伪元素插入：

#content img[title]:after {
    content: "[" counter(image) "] " attr(title);
    counter-increment: image;
    display: block;
    text-align: center; }

Answer 6

类似这样的：http://jsfiddle.net/QLcRC/ ?