Question

我遇到了关于浮动样式的问题。就像下面的html代码一样：

...
<body>
    <div style="float:left;width:25%;height:100px;background-color:red;"></div>
    <div style="float:left;width:74%;height:100px;border:1px solid black;">
        <div style="width:1000px;height:50px;background-color:yellow;"></div>
        <div style="clear:both;"></div>
    </div>
</body>
...

效果是第2个浮点div中的内容溢出。黄色div位于float div中，但其宽度超过其父级。我想知道如何设置css样式以使第2个float div可以自动设置其子元素的宽度/高度？我知道明确的风格可以清除按顺序列出的div的浮动，但是当它包含一个更大的孩子时如何处理它？我不想使用js来修改父div的宽度。

Answer 1

您可以使用min-height和min-width来实现此目的。通过这种方式，父母将在孩子们更大的时候总是适合孩子的身高和宽度。

查看here。

Answer 2

删除width和height属性（或将min-heigh和min-width属性设置为Stephan mentioned，您将使父div延伸到子级。

http://jsfiddle.net/5ohtx2nc/1/

然而，这导致如果它们比屏幕宽，则第二个浮动的div将移动到下一行

http://jsfiddle.net/5ohtx2nc/

如果你坚持让两个div一个接一个，你需要做一些技巧，比如How to position two divs side by side where the second width is 100%?

http://jsfiddle.net/5ohtx2nc/3/

float div溢出问题中的内容

2 个答案: