Question

我有一个非常简单的div，包含一些左浮动div：

<div id="group1" style="padding: 10px">
    <div style="width: 180px; float: left">...</div>
    <div style="width: 180px; float: left">...</div>
    <div style="width: 180px; float: left">...</div>
    <div style="width: 180px; float: left">...</div>
</div>

现在我有一些关于group1高度的问题。基本上填充底部不起作用，因为group1的高度不是动态的。在开发工具中它显示总是21px。根据浏览器窗口的大小，内部div需要更多空间。我尝试了一些高度组合：自动和最小高度，但没有任何效果。

我是否真的必须根据浏览器窗口大小计算高度？应该有更方便的东西！

非常感谢任何帮助！感谢

Answer 1

＆＃13;

filename

＆＃13;

Answer 2

当一个元素使用属性float它不会影响父级的大小时，它只会浮动在那里，即使内联元素确实会影响父级。

因此，无论何时使用此类div，都必须清除浮动上下文。

有几种方法可以实现这一目标：

在父

clear: both;

将overflow: hidden;添加到父元素
将float本身添加到父级，但这可能会导致更高级别元素的高度出现问题。

Answer 3

您也可以使用：

<div id="group1" style="padding: 10px; width:100%; display:table;">
  <div style="width: 180px; float: left">hello</div>
  <div style="width: 180px; float: left">hello</div>
  <div style="width: 180px; float: left">hello</div>
  <div style="width: 180px; float: left">hello</div>
</div>

Answer 4

我已相应更改了您的代码并添加了一些必需的属性，请参阅以下代码段。

 <div id="group1" style="padding: 10px; border:1px solid; overflow:hidden;">
       <div style="width: 180px; border:1px solid; float: left;">...</div>
       <div style="width: 180px; border:1px solid; float: left;">...</div>
       <div style="width: 180px; border:1px solid; float: left;">...</div>
       <div style="width: 180px; border:1px solid; float: left;">...</div>
    </div>

Answer 5

问题在于浮动内部元素。一个解决方案是@LokeshGupta发布的内容。但另一个，如果你不想浮动父，就是使用clear block：

<div id="group1" style="padding: 10px">
    <div style="width: 180px; float: left">...</div>
    <div style="width: 180px; float: left">...</div>
    <div style="width: 180px; float: left">...</div>
    <div style="width: 180px; float: left">...</div>
    <div style="clear: both;"></div>
</div>

CSS：包含div的div的高度

5 个答案: