Question

我有一个包装器<div>，它包含两个浮动的内部<div>。

<div class="outside" style="border:1px solid #555;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>

问题是包装器<div>的宽度为80px，因为两个内部<div>各为40px。但总是包装<div>的高度为0px，这使得边框看起来像是顶部的一条线。

所以我将两个内部<div>放在<table>内。它运作良好。但是，如何在不使用<table>的情况下避免此问题？

Answer 1

在父级上设置overflow: hidden。

<div class="outside" style="border:1px solid #555;overflow:hidden;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>

Answer 2

外部div是collapsing，因为其中的两个子div是浮动的。最简单的解决方法是在外部overflow: hidden;上设置div。

Answer 3

试试这个：

<div class="outside" style="border:1px solid #555; overflow:auto">
<div class="inside" style="float:left; width:40px;">CONTENT</div>
<div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>//Outside container close

包装器div高度为0，内部带有浮动元件

3 个答案: