css - 父级 float 元素不会随子级宽度的百分比调整大小

Question

我有一个 float 父 div，其中包含使用 width: 30% 的子项。

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

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

请查看此示例以了解更多详细信息: 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，它将默认为完整的可用宽度，但您可以明确限制它。 This CSS将使您的两个示例大小大致相同:

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

如果容器的可用空间超过(略低于)500px，那么它会扩展到占用可用空间的 66%，但它会保持足够的宽度，因此 30% 宽度的子元素始终至少有 100px 宽。