向左和向右浮动

Question

这个问题困扰了我一段时间.所以我创建了一些关于我的问题的视觉描述

首先是我的HTML结构我有6个div ..前3个浮点数左边,最后3个浮点数右边.最后一张图片显示了我想要的结果,但似乎无法获得.有人可以帮助我吗？

编辑//抱歉,我的HTML和CSS

<style>
    .left { float:left; }
    .right { float:right; }
</style>
<div id="container">
   <div class="left"></div>
   <div class="left"></div>
   <div class="left"></div>
   <div class="right"></div>
   <div class="right"></div>
   <div class="right"></div>
</div>

注意:我不能左右做左右选项,因为我从PHP通过查询到我的数据库获取我的数据..第一个查询左边第二个查询正确....感谢一堆

/编辑

我的花车导致了这个

这就是我要的

Answer 1

向左,向右浮动一个,然后首先清除:两个属性

<div class="left clear"></div>
<div class="right"></div>
<div class="left clear"></div>
<div class="right"></div>

CSS

.left {float:left}
.right {float:right}
.clear {clear:both}

例

Answer 2

您可以使用CSS3 column-count属性.像这样写:

.parent{
    -moz-column-count: 2;
    -moz-column-gap: 50%;
    -webkit-column-count: 2;
    -webkit-column-gap: 50%;
    column-count: 2;
    column-gap: 50%;
}
.parent div{
    width:50px;
    height:50px;  
    margin:10px;
}
.left{
    background:red;
}
.right{
    background:green;
}

检查这个http://jsfiddle.net/UaFFP/6/

Answer 3

添加第一个左div,然后是第一个右div,然后添加<br style="clear:both">并重复该过程.

编辑:这是一个更新的答案:

<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>