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

【问题标题】：Prevent paragraph from increasing the width of a floated parent防止段落增加浮动父级的宽度
【发布时间】：2013-10-01 01:43:30
【问题描述】：

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

...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，我一直在动态定义图像的大小（在本例中为 250 像素），并且我也一直在将大小限制应用于包含两者的父元素img 及其标题。这样，标题永远不会将父元素的大小增加到超过 img 标记的定义宽度。

我的问题是，是否有一些 CSS 技巧可以应用于其中一个元素，无需手动定义宽度即可完成相同的事情？某种方法可以防止标题扩展其父元素的宽度，但允许它们影响高度？当然父元素的宽度还是需要适应img的宽度...

【问题讨论】：

标签： css html figure caption

【解决方案1】：

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

    min-width: 100%;
    width: 0;

这绕过了使用绝对定位的解决方案。

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

    vertical-align: top;

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

【讨论】：

我想我的意思是在不同的页面上回答这个类似的问题，然后在此处链接答案以供参考......哎呀！很高兴我能帮上忙。编辑是的，我原本打算回答这个话题：stackoverflow.com/questions/10691941/…
啊，这解释了不匹配的类。 :p

【解决方案2】：

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

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

即使图像的宽度较高，这也会为 div 或图形标签设置静态宽度

【讨论】：

这里的主要部分是 max-width 保持你想要的宽度。
也许我不够清楚 - 这样做的目的是能够避免在 HTML 中添加宽度。图片可以有各种不同的宽度，我想知道是否有解决所有宽度情况的解决方案。
将 max-width 属性设置为任一元素，这让您变得简单
不，这没有帮助，抱歉。