如何浮動左或右兩次？

基本上，我想在一個div的最左邊區域中有兩個不同的元素，而對於div的最右邊區域，我需要兩個元素。如何浮動左或右兩次？

但是，如果我使用浮動：左和float：右側兩次，我得到如下：

ELEMENT         ELEMENT 

      ELEMENT      ELEMENT

而不是

ELEMENT         ELEMENT 

    ELEMENT         ELEMENT

這是因爲，當我漂浮在第二次css漂浮剩下的剩餘空間。

我該如何解決這個錯誤？

來源

2012-12-29 JoseBazBaz

你說的意思是看看here 「浮兩次？」你能告訴我們導致這個問題的CSS嗎？ – derekerdmann

確保每次要開始新行時清除浮動塊。把這個放在你想開始一個新行的地方：

– SISYN

使用網格系統 –

您可以使用clear:both;和float:left;屬性。

嘗試Jsbin演示

.left { 
 
    float:left; 
 
    width:40%; 
 
    height:240px; 
 
    border:1px solid red; 
 
} 
 

 
.right { 
 
    float:right; 
 
    width:40%; 
 
    border:1px solid red; 
 
    height:240px; 
 
} 
 

 
.elem1 { 
 
    float:left; 
 
    margin-bottom:20px; 
 
} 
 

 
.elem2 { 
 
    float:left; 
 
    clear:both; 
 
} 
 

 
.elem3 { 
 
    float:left; 
 
    margin-bottom:20px; 
 
} 
 

 
.elem4 { 
 
    float:left; 
 
    clear:both; 
 
}

<div class="left"> 
 
    <div class="elem1">element 1</div> 
 
    <div class="elem2">element 2</div> 
 
</div> 
 
<div class="right"> 
 
    <div class="elem3">element3</div> 
 
    <div class="elem4">element4</div> 
 
</div>

來源

2012-12-29 04:15:55

明亮而簡潔。 :) – JoseBazBaz

謝謝..... :) –

你需要的是你的CSS中的clear: both。

你的浮動工作正常，但沒有足夠的內容推動第一個元素下面的下一個元素。如果你將它們設置爲clear，那麼他們會。

來源

2012-12-29 04:11:25 Brad

這對我有用。

.right { 
 
    float:right; 
 
} 
 

 
.left { 
 
    float:left; 
 
}

<div> 
 
    <div class="right">1 element</div> 
 
    <div style="clear:both"></div> 
 
    <div class="right">1 element</div> 
 

 
    <div class="left">1 element</div> 
 
    <div style="clear:both"></div> 
 
    <div class="left">1 element</div> 
 
</div>

這裏是小提琴。 http://jsfiddle.net/nQvEW/143/

來源

2012-12-29 04:14:13

試試這個：

標記：

<div class='clear:both'> 
    <!-- left container --> 
    <div style = "float:left;"> 
    <div style = "float:left;"> 
     Element 
    </div> 
    <div style = "float:left; clear:left;"> 
     Element 
    </div>  
    </div> 
    <!-- right container --> 
    <div style = "float:right"> 
    <div style = "float:right;"> 
     Element 
    </div> 
    <div style = "float:right; clear:right;"> 
    Element 
    </div> 
</div>

請使用您自己的外部風格，這只是爲了引導您。

來源

2012-12-29 04:19:37

請對jsfiddle

.wrapper { 
 
    height:100px; 
 
    border:1px solid red; 
 
    margin: 5px; 
 
} 
 

 
.left { 
 
    margin: 10px;  
 
    float:left; 
 
    width: 45%;  
 
} 
 

 
.right { 
 
    margin: 10px; 
 
    float:right; 
 
    width: 45%; 
 
}

<div class="wrapper"> 
 
    <div class="left">element 1</div> 
 
    <div class="right">element 2</div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="left">element3</div> 
 
    <div class="right">element4</div> 
 
</div>

enter image description here

來源

2012-12-29 04:42:55

如何浮動左或右兩次？

回答

相關問題