Question

我有一个包含使用width: 30%的孩子的浮动父div。

如果使用百分比作为宽度单位，这个父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宽。

父浮动元素不会使用百分比宽度子级调整大小

1 个答案: