父浮动元素不会随子元素的百分比宽度调整大小

Question

我有一个浮动父 div，其中包含一个使用 width: 30% 的子元素。

如果使用百分比作为宽度单位，这个父 div 似乎不会调整大小，但在使用 px 或 ems 时效果很好。

因为我想要一个流畅的布局，所以在使用 width: 30% 时有什么方法可以让父 div 调整其宽度吗？

请查看此示例以了解更多详细信息： http://jsfiddle.net/sBzYH/

<div class='percent container'>
    <div>
        <h3>width: 30%</h3>
        <p>
            When using the child div
            with percent width, the floating
            parent div keeps expading 100%.
        </p>
    </div>
</div>

<div class='pixel container'>
    <div>
        <h3>width: 100px</h3>
        <p>
            When using the child div 
            with pixel width, the floating
            parent div resizes accordingly.
        </p>
    </div>
</div>

Answer 1

父容器已经是流体宽度，因为它是一个 div ，它将默认为完整可用宽度，但您可以明确限制它。 此 CSS 将使您的两个示例大小大致相同：

.container { 
    width: 66%; 
    min-width: 325px; 
}

如果可用的大小超过（略低于）500px对于容器，它将扩展以占据 66% 的可用空间，但它将保持足够的宽度，使得 30% 宽度的子元素始终至少为 100px 宽。