Question

我经常发现自己使用内嵌文章图像的代码块，如下所示：

...article text.
<div class="article-image right" style="width: 250px;">
    <img src="..." width="250" alt="" />
    <p class="caption">Potentially long image caption</p>
</div>
More article text...

或者，更简洁的HTML5版本：

...article text.
<figure class="right" style="width: 250px;">
    <img src="..." width="250" alt="" />
    <figcaption>Potentially long image caption</figcaption>
</figure>
More article text...

由于我使用的是动态处理图像的CMS，我一直在动态地定义图像的大小（在这种情况下为250px），并且我也一直在将包含两者的父元素应用该大小限制img及其标题。img这样，标题永远不会增加父元素的大小超出img标记的定义宽度。

我的问题是，如果有一些CSS技巧我可以应用于其中一个元素，它将完成同样的事情，而无需手动定义宽度？一些方法可以防止字幕在宽度上扩展其父元素，但允许它们影响高度？当然，父元素的宽度仍然需要适应{{1}}的宽度......

Answer 1

要阻止子元素影响父宽度，请将其应用于子元素：

    min-width: 100%;
    width: 0;

这使用绝对定位来解决问题。

对于垂直排列它们，也可以使用：

    vertical-align: top;

JSFiddle：http://jsfiddle.net/ETkkR/87/

Answer 2

div或figure元素的CSS代码已经足够了。

style="width: 250px; 
**max-width:250px;"**

即使图像宽度较高，也会将静态宽度设置为div或figure标记

防止段落增加浮动父级的宽度

2 个答案: