Question

我想实现带有可以进入内容的标题的图像，可以左对齐，右对齐和居中对齐。

父div具有动态宽度，图像具有动态。

如何实现？

我接下来试过了：

<div class="col-lg-4">
    <div class="image" style="display:table;">
    <img src="foo.jpg" alt="" />
    <div style="display:table-caption;caption-side:bottom;">This is the caption.</div>
</div>
</div>

但首先，对于宽度超过父div.col-lg-4的图像，它在FF中不起作用因此，使用此方法，图像应具有固定宽度，或具有display：table的父块。因此，使用该表和表标题属性是没有意义的。因为您可以设置宽度而不使用它们。

Answer 1

我首选的方法是使用figure和figcaption

http://jsfiddle.net/3n1gm4/rfsYy/

<figure>
    <img src="animageURL.jpg" alt="an image" />

    <figcaption>The images caption woo woo</figcaption>
</figure>

figure是块级元素，因此您需要将其设置为display: table和width: 1%（也可能是1px）以使其拉伸但同时保持僵硬< / p>

figure {
    margin: 10px;
    padding: 10px;
    background: #ccc;
    display: table;
    float: left;
    width: 1%;
}

Answer 2

如上所述，在这种情况下，数字/ figcaption是理想的。

JSFiddle

<div class="wrapper">
    <figure>
        <img src="http://lorempixel.com/100/100/" alt=""/>
        <figcaption>Text 1</figcaption>
    </figure>
    <figure>
        <img src="http://lorempixel.com/200/200/" alt=""/>
        <figcaption>Text 2</figcaption>
    </figure>
    <figure>
        <img src="http://lorempixel.com/50/50/" alt=""/>
        <figcaption>Text 3</figcaption>
    </figure>

</div>

要获得响应，请将数字设置为inline-block。

.wrapper { /* just an example */
    width:90%;
    border:1px solid grey;
}

figure {
    display:inline-block;
    vertical-align:top;
}

figure img {
    display:block;
}

实现图像标题的最佳方法是什么？

2 个答案: