0

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

父 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 的父块。所以使用那个表格和表格标题属性是没有意义的。因为您可以设置宽度而不使用它们。

4

2 回答 2

3

我的首选方式是使用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）以使其拉伸但同时保持刚性

figure {
    margin: 10px;
    padding: 10px;
    background: #ccc;
    display: table;
    float: left;
    width: 1%;
}
于 2013-10-28T20:01:30.323 回答
0

如前所述，图/图说明在这种情况下是理想的。

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;
}
于 2013-10-28T20:28:20.870 回答