浮动左右

这个问题一直困扰着我一段时间。所以我已经创建了一些我的问题的视觉描述浮动左右

首先这里是我的HTML结构我有6个divs。前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

我的F loats导致该

this is my current result

这是我想

I want this

来源

2012-06-12 Oldenborg

请将您的代码... –

对于漂亮的图像+1，对于没有标记或CSS的问题！ –

一左一右 –

您可以使用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/

来源

2012-06-12 10:48:08 sandeep

无论何时使用CSS3列回答浏览器支持都很有用：http：//caniuse.com/multicolumn。例如，这在IE9中不起作用，很多人需要支持。 – thirtydot

这正是我所期待的。但我确实需要支持ie7以上。所以它并不完全有用..但你的想法正确，因为大多数人没有。所以谢谢。 – Oldenborg

对于IE你可以使用这个JS http://www.csscripting.com/css-multi-column/ – sandeep

添加第一左格的，那么第一权股利和后它们添加<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>

来源

2012-06-12 10:12:59

对不起，这不是一个选项 – Oldenborg

为什么？你可以让**
**绝对没有视觉表现。 –

我正在一个项目中，我唯一可以访问的thig是CSS文件.. everyting其他是offlimits – Oldenborg

浮法一个向左，一个向右，给第一个清晰的：既财产

<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

来源

2012-06-12 10:14:59

@jacktheripper：很好，你在我之前做过 –

假设你在他们中间有另一个div。然后用这个顺序为：

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

或者，如果你不这样做，只是增加一个的div给它提供一个风格clear:both。

来源

2012-06-12 10:15:31

class not id;） –

哦，是的。谢谢@khaled_webdev –

不得不操纵元素的顺序也不是一个好的解决方案。 – crush

使用：第n个孩子选择和清算后的2的div：

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

Live example

否则使用此相当哈克方法，它不需要额外的标记：

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

来源

2012-06-12 10:19:47 jacktheripper

我试过对它进行一些修改，但似乎无法正确使用它。这里是我在哪里，我不能接触HTML ..这是固定的..我只能用CSS [现场示例]（http://jsfiddle.net/nSDcb/） – Oldenborg

<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％。

来源

2012-06-12 10:30:40 bdede

我会这样做，但我指示不要触摸HTML，我只能更改CSS – Oldenborg

HTML：

<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"></div>

样式：

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

来源

2014-02-15 21:43:06

column-count已经被广泛的支持 - http://caniuse.com/#feat=multicolumn 所以，如果旧的浏览器没有按”不要打扰你考虑使用我吨。

来源

2016-01-30 18:18:40 Vlad

你怎么处理它（解决OP的问题）？ – dakab

我想知道，3年后：D – Oldenborg

回答

相关问题