CSS Float Left然后Right

Question

我遇到浮动问题。我会试着解释一下我的问题。我有6个菜单栏，我想浮动。左边3，右边3。但是我希望右边的那些在左边的3之后。因为它们不高于最后一个左边的底部。与其他人的图片类似（Credit转到主题here

然而，我正在获得相同行中的所有条形。

我在下面提供了所有CSS比例。任何人都可以弄清楚为什么我不能按照我想要的方式得到它？ （酒吧组进入游戏 - 信息内容）

#gameplay-info-content {width: 688px;}
#bar-group-left {float: left; margin: 8px;}
#bar-group-right {float: right; margin: 8px;}

Answer 1

HTML：

<div class="leftcolums">
    <div class="left">1</div>
    <div class="left">2</div>
    <div class="left">3</div>    
</div>

//If you want to achieve the first image add a div with class clear below
<div class="clear"></div>

<div class="rightcolums">
    <div class="right">4</div>
    <div class="right">5</div>
    <div class="right">6</div>
</div>
<div class="clear"></div>

样式：

.leftcolums{float:left;}
.rightcolums{float:right;}
.clear{clear:both;}