CSS 左右浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10994515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Float left and right
提问by Oldenborg
this problem has been bothering me for some time. So I have created some visual descriptions of my problem
这个问题已经困扰我一段时间了。所以我为我的问题创建了一些视觉描述
First here is my HTML structure I have 6 divs.. the first 3 float left and the last 3 float right. The last image shows the result I want but can't seem to get. Can someone out there help me here
首先这里是我的 HTML 结构，我有 6 个 div.. 前 3 个向左浮动，最后 3 个向右浮动。最后一张图片显示了我想要但似乎无法得到的结果。有人可以在这里帮助我吗
EDIT// Sorry heres my HTML and CSS
编辑//对不起，我的 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>
NOTE: I Cant do a left right left right left right option because Im getting my data from PHP via a Query to my database.. first query goes left second query goes right.... thanks a bunch
注意：我不能做一个左右左右的选项，因为我通过查询从 PHP 获取我的数据到我的数据库......第一个查询向左第二个查询向右......谢谢一堆
/EDIT
/编辑
My floats result in this
我的花车导致这个
This is what I want
这就是我要的
采纳答案by sandeep
You can use CSS3 column-countproperty for this. Write like this:
您可以column-count为此使用 CSS3属性。像这样写：
.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;
}
Check this http://jsfiddle.net/UaFFP/6/
回答by khaled_webdev
回答by Дамян Станчев
Add the first left div, then the first right div and after them add <br style="clear:both">and repeat the procedure.
添加第一个左侧 div，然后添加第一个右侧 div，然后添加<br style="clear:both">并重复该过程。
Edit: Here's an updated answer:
编辑：这是一个更新的答案：
<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>
回答by Tepken Vannkorn
Suppose you have another div in the middle of them. Then use this chronological order:
假设您在它们中间有另一个 div。然后使用这个时间顺序：
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
Or if you don't, just add another div that provide a style clear:bothto it.
或者，如果您不这样做，只需添加另一个为其提供样式的 div clear:both。
回答by bdede
<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>
Mind it would be odd not to have a central DIV, if that is a case float the parent DIVs left, at say widths of 20% 60% 20%.
请注意，没有中央 DIV 会很奇怪，如果是这种情况，父 DIV 会浮动，例如宽度为 20% 60% 20%。
回答by Vlad
column-countis already widely supported - http://caniuse.com/#feat=multicolumnSo if old browsers doesn't bother you consider using it.
column-count已经得到广泛支持 - http://caniuse.com/#feat=multicolumn所以如果旧浏览器不打扰你考虑使用它。
回答by Ricky Stam
Try this:
尝试这个：
.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>回答by Hymantheripper
Using the :nth-child selector and clearing after 2 divs:
使用 :nth-child 选择器并在 2 个 div 后清除：
?div {
width: 50px;
height: 50px;
background-color: red;
float: left;
}
div:nth-child(2n) {
background-color: green;
float: right;
}
Otherwise use this fairly hacky method, which requires no additional markup:
否则使用这个相当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
}
? 活生生的例子
