1. 首頁
  2. 問答
  3. 浮動左右

浮動左右

2012-06-12 271 views
29

這個問題一直困擾着我一段時間。所以我已經創建了一些我的問題的視覺描述浮動左右

首先這裏是我的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

+0

請將您的代碼... –

+7

對於漂亮的圖像+1，對於沒有標記或CSS的問題！ –

+0

一左一右 –

回答

14

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

+0

無論何時使用CSS3列回答瀏覽器支持都很有用：http：//caniuse.com/multicolumn。例如，這在IE9中不起作用，很多人需要支持。 – thirtydot

+0

這正是我所期待的。但我確實需要支持ie7以上。所以它並不完全有用..但你的想法正確，因爲大多數人沒有。所以謝謝。 – Oldenborg

+1

對於IE你可以使用這個JS http://www.csscripting.com/css-multi-column/ – sandeep

5

添加第一左格的，那麼第一權股利和後它們添加<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

+3

對不起，這不是一個選項 – Oldenborg

+0

爲什麼？你可以讓**
**絕對沒有視覺表現。 –

+2

我正在一個項目中，我唯一可以訪問的thig是CSS文件.. everyting其他是offlimits – Oldenborg

18

浮法一個向左，一個向右，給第一個清晰的：既財產

<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

+1

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

3

假設你在他們中間有另一個div。然後用這個順序爲：

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

或者，如果你不這樣做，只是增加一個的div給它提供一個風格clear:both。

來源

2012-06-12 10:15:31

+0

class not id;） –

+0

哦，是的。謝謝@khaled_webdev –

+0

不得不操縱元素的順序也不是一個好的解決方案。 – crush

0

使用：第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

+0

我試過對它進行一些修改，但似乎無法正確使用它。這裏是我在哪裏，我不能接觸HTML ..這是固定的..我只能用CSS [現場示例]（http://jsfiddle.net/nSDcb/） – Oldenborg

3 
<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

+0

我會這樣做，但我指示不要觸摸HTML，我只能更改CSS – Oldenborg

0

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

相關問題

 相關問題