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

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标记的定义宽度.

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

Answer 1

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

    min-width: 100%;
    width: 0;

这解决了使用绝对定位的解决方案.

对于垂直排列,也可以使用:

    vertical-align: top;

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