图片标题和包装

Question

在图片下方添加标题的最佳方法是什么？图像及其标题将向右浮动，标题上的文字需要换行 - 200x200px图像的标题宽度不得超过800px。

我非常希望能够在不更改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="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>

您可以将figure和figcaption替换为div和p，或者将其他容器替换为您的语义船。

无耻的插件：如果你有兴趣，我在博客上写了这个问题和my solution here。

Answer 2

像这样：http://jsfiddle.net/QLcRC/？

Answer 3

基本想法是使用<div>代码和<img>代码制作一个<p>。

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

现在您只需设置两种样式。一个用于img标签，另一个用于照片类的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.对于<p>和<img>标记，Div应该有一个具有不同样式的类。

Answer 4

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

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

另一种（不那么跨浏览器的）精通方法是使用img title-attribute并通过CSS将其作为伪元素插入：

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

Answer 5

纯HTML / CSS内联样式。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 6

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

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