css - 没有固定高度的浮动 DIV

Question

一些基本的 css-float 问题，我自己无法解决，所以我将不胜感激。

我想向左浮动 3 个容器，向右浮动 3 个容器 - 仅此而已。容器的高度由其内容设置。

.float-left {
    float: left;
    margin-top: 26px;
    background-color: #6abe0f;
    width: 416px;
    color: #3e3e3e;
}
.float-right {
    float: right;
    margin-top: 26px;
    background-color: #6abe0f;
    width: 416px;
    color: #3e3e3e;
}

http://jsfiddle.net/hausmaster/TZhWy/5/

非常感谢！

Answer 1

试试这个，在每一行中插入分隔符 div

<div class="divider"></div>

.divider {
    width:832px;
    float:left;
    height:30px;
}

http://jsfiddle.net/TZhWy/7/

Answer 2

试试.float-left { clear: left; }。

http://jsfiddle.net/TZhWy/6/

或将它们放入行中，然后使用overflow:hidden;

<div class="row">
  <div class="float-left>I go left</div>
  <div class="float-right>I go right</div>
</div>

http://jsfiddle.net/TZhWy/8/