浮动Div +动态高度

Question

这个想法：我有一个容器div，里面有两个div，就像页面上的两列一样。

问题：我必须使用CSS'float'属性才能使两个div显示在彼此旁边，但是当我将float：left或right应用于div时，父div不会浮动，不会拉伸到子div的大小，所以背景消失。我知道一个Javascript技巧来解决这个问题，但是我有什么简单，干净的CSS解决方案吗？

Answer 1

添加“overflow：auto;”到父母应该工作。

在浮动元素工作之后立即添加类似内容：

<div class="parent">
    <div style='float:left;'></div>
    <div style='float:right;'></div>
    <div class='clear'></div>
</div>

然后只需将.clear类添加到你的css：

.parent{
    overflow:auto;
}
.clear{
    clear:both;
}

Answer 2

使用clearfix技术应成功拉伸您的父元素。

您可以在父母的底部添加清除元素：

HTML

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="clear"></div>
</div>

CSS

.clear { clear: both }

或者您可以将CSS clearfix hack应用于父元素。

CSS

.parent { overflow: auto }

从某种意义上说，这是一种权衡。哪种感觉更加hackish：额外的标记，或者只是碰巧做你想要的CSS？

Answer 3

使用display：inline-block而不是float。应用于块元素的内联块使它们显示为内联。因此，如果容器具有类容器，则需要使用以下CSS：

.container div
{
     display:inline-block;
}

对于IE6和7，你只能使用display：inline，它的行为与inline-block相同。