4

如果一个 div 中包含两个 div：

<div style="border:1px;">
    <div style="float:left;background-color:red;width:20px;height:20px;">
    <div style="float:left;background-color:red;width:20px;height:20px;">
</div>

两个内部 div 呈现为“不可见”，因为在容器中 div 不会拉伸以允许它们填充，就好像它们不存在一样。这会产生难看的重叠/空白等。

你如何解决这个问题？

4

6 回答 6

5

插入第三个 div：

<div style="clear:both;"></div>
于 2010-08-25T15:29:18.377 回答
2

我认为这可能是因为您忘记关闭标签，试试这个：

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:green;width:20px;height:20px;"></div>
</div>
于 2010-08-25T15:28:58.077 回答
2

尝试添加<br style="clear:both"/>, （或清除左侧）这是一种常用方法来赋予容器中的浮动元素以生命

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"> ... </div>
<div style="float:left;background-color:red;width:20px;height:20px;"> ... </div>
<br style="clear:both"/>
</div>
于 2010-08-25T15:30:06.743 回答
1

父元素永远不会扩展以包含浮动的子元素。虽然 IE<8 确实做到了这一点，但在那个无能的浏览器中，这是一个长期存在的错误（数百万个）。最好的解决方案是浮动父级，设置高度/宽度，或在 CSS 中使用溢出：自动。

于 2010-08-25T15:33:26.790 回答
0

外部 div 不浮动，因此除非您明确设置高度，否则在这种情况下它不会显示（边框除外）。将外部 div 的高度设置为 20px 或浮动它。

于 2010-08-25T15:28:15.680 回答
0

您是否有理由不/不能在 div 中放置任何内容？由于没有内容，它们重叠/显示为不可见。

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:blue;width:20px;height:20px;"></div>
</div>

将显示两个 div 并排显示（经过测试的 IE6、Chrome 3、Firefox 3.5、IE7）

于 2010-08-25T15:30:23.457 回答