左右浮动 [英] Float left and right

问题描述

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

首先是我的HTML结构我有6个div ..第一3浮点左，最后3浮点右。最后一个图像显示我想要的结果，但似乎不能得到。

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

/ EDIT

我的浮动广告素材会产生此

这是我想要的

解决方案

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

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

EDIT// Sorry heres my HTML and 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

/EDIT

My floats result in this

This is what I want

解决方案

You can use CSS3 column-count property for this. Write like this:

.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/

这篇关于左右浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！