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获取数据到我的数据库..第一个查询左边第二个查询正确....感谢一堆

/ EDIT

This is a mocukup of my HTML structure

我的花车导致了这个

this is my current result

这就是我想要的

I want this

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}

Example

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>

Answer 4

假设你中间有另一个div。然后按照时间顺序使用：

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

如果不这样做，只需添加另一个为其提供样式clear:both的div。

Answer 5

<style type="text/css">

.parent {width:50px; border:1px solid red;}

.left {float:left; }

.right{float:right;}

.child{height:50px;width:50px;border:solid 1px green;margin:0 0 10px 0;}

</style>

<body>

<div class="left parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

<div class="right parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

</body>

</html>

请注意，没有中央DIV会很奇怪，如果这是父DIV离开的情况，例如宽度为20％60％20％。

Answer 6

column-count已得到广泛支持 - http://caniuse.com/#feat=multicolumn 因此，如果旧浏览器不打扰您，请考虑使用它。

Answer 7

试试这个：

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

<div class="leftcolums">
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="left">3</div>
</div>
<div class="rightcolums">
  <div class="right">4</div>
  <div class="right">5</div>
  <div class="right">6</div>
</div>
<div class="clear">7</div>

Answer 8

使用：nth-child选择器并在2个div之后清除：

div {
    width: 50px;
    height: 50px;
    background-color: red;
    float: left;
}
div:nth-child(2n) {
    background-color: green;
    float: right;
}

Live example

否则使用这个相当hacky的方法，不需要额外的标记：

div {
    width: 50px;
    height: 50px;
    background-color: red;
    float: left;
}
div:nth-child(n) {
    clear: both;
}

div:nth-child(2n) {
    background-color: green;
    float: right;
    margin-top: -50px; //match this to the div height
}

Live example

向左和向右浮动

8 个答案: