0

我有一个包含 2 列的 div。左列具有动态高度，但右列始终具有固定高度。为此，我将两个列 div 都浮动在容器 div 内。但是，我想设置容器 div 的背景，这不会做任何事情，因为没有内容 - 如果我向容器 div 添加高度，我只会看到背景颜色，我不想这样做.

我该如何解决？

<div id="container" style="background-color:pink" >
    <div class="col1" style="float:left;>...</div>
    <div class="col2" style="float:left; height:200px;>...</div>
</div>
4

3 回答 3

2

发生这种情况是因为所有子元素都是浮点数。添加overflow: hidden;到容器 div 以使其环绕内容。这是一个工作小提琴。如果您希望将 div 宽度包裹在内容周围，也可以添加display: table;到容器 div 中。

于 2013-06-03T11:12:53.237 回答
2

您需要清除浮动。有三种方法可以做到这一点。

传统的

只需通过添加一个空元素来清除浮动即可。

<div style="background-color:pink">
  <div style="float:left;">...</div>
  <div style="float:left; height:200px;">...</div>
  <div style="clear:left"></div>
</div>

您需要添加额外的标记，这根本不是很好。

溢出

有点现代的技术是添加溢出。可以有auto或的值hidden。

<div style="background-color:pink; overflow:auto;">
  <div style="float:left;">...</div>
  <div style="float:left; height:200px;">...</div>
</div>

该解决方案有一些缺点（见下文）。

微清除修复

有时我们不能使用溢出技术，因为我们需要用偏移量或其他东西从元素中放入一些东西。然后我们可以使用Nicolas Gallagher 的 micro-clearfix。

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

有了这个，只需将类添加.cf到容器元素就可以正常工作，并且没有溢出方法的缺点，而且您不需要添加任何其他额外的标记。这是一个很好的解决方案，您只需添加类即可在需要的地方使用它。

我推荐最后一种方法。它非常干净优雅。

于 2013-06-03T11:30:42.110 回答
0

看起来你正遭受着名的折叠容器问题。实际上，当您浮动容器元素的内容时，该元素将折叠到其中包含的最大未浮动元素的高度。如果容器的所有包含的元素和内容都是浮动的，则包含的元素将崩溃为空。

有两个选项可以解决这个问题，首先你可以像这样添加一些额外的标记......

<div id="container" style="background-color:pink" >
    <div class="col1" style="float:left;>...</div>
    <div class="col2" style="float:left; height:200px;>...</div>
    <!-- This <br /> is an unfloated element that clears the floated elements above -->
    <!-- thus acting as an HTML 'wedge' -->
    <br style="clear:both;" /> 
</div>

...但这增加了额外的标记

或者，您可以使用这样的 CSS（假设您的原始代码）

#container:after   {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
#container         {display: inline-block;}
* html #container  {height: 1%;}
#container         {display: block;}

这使您根本不必添加任何额外的 HTML。

一个愉快的折衷方案是替换#container为.cf（或类似的 - 我使用 cf 表示“clearfix”）并将 .cf 类应用于任何遭受此问题的东西。

有关此技术的进一步说明，请尝试使用谷歌搜索 clearfix。上面的这个方法现在可能已经过时了——我只是从我的代码库中挖出来的 :)

于 2013-06-03T11:21:57.387 回答