向左和向右浮動

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通過查詢到我的數據庫獲取我的數據..第一個查詢左邊第二個查詢正確....感謝一堆

/編輯

這是我的HTML結構的mocukup

我的花車導致了這個

這是我目前的結果

這就是我要的

我要這個

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>

Answer 4

假設你中間有另一個div。 然后使用這個時間順序：

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

或者如果你不這樣做，只需添加另一個提供樣式clear:both div clear:both可以。

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;
}

實例

否則使用這個相當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
}

活生生的例子

向左和向右浮動

問題描述

8 個解決方案

解決方案1
19 2012-06-12 10:14:59

解決方案2
15 已采納 2012-06-12 10:48:08

解決方案3
7 2012-06-12 10:12:59

解決方案4
3 2012-06-12 10:15:31

解決方案5
3 2012-06-12 10:30:40

解決方案6
2 2016-01-30 18:18:40

解決方案7
1 2014-02-15 21:43:06

解決方案8
0 2012-06-12 10:19:47

向左和向右浮動

問題描述

8 個解決方案

解決方案1 19 2012-06-12 10:14:59

解決方案2 15 已采納 2012-06-12 10:48:08

解決方案3 7 2012-06-12 10:12:59

解決方案4 3 2012-06-12 10:15:31

解決方案5 3 2012-06-12 10:30:40

解決方案6 2 2016-01-30 18:18:40

解決方案7 1 2014-02-15 21:43:06

解決方案8 0 2012-06-12 10:19:47

解決方案1
19 2012-06-12 10:14:59

解決方案2
15 已采納 2012-06-12 10:48:08

解決方案3
7 2012-06-12 10:12:59

解決方案4
3 2012-06-12 10:15:31

解決方案5
3 2012-06-12 10:30:40

解決方案6
2 2016-01-30 18:18:40

解決方案7
1 2014-02-15 21:43:06

解決方案8
0 2012-06-12 10:19:47