不正確的浮動

我有一個父母的div，它包含了一堆子div。其中一個向左漂移，其餘的向右漂移。它工作得很好時，只有少數的div的是對的浮動，但我因爲增加了更多，結果顯示如下：不正確的浮動

淺綠色父DIV的背景下，其他顏色都在申報單題。有些實際上由於某種原因正確地漂浮，但綠色應該在藍色之後，而粉紅色在紅色之後。

我有父親最div的overflow: hidden;，並且高度沒有影響這個child-div行爲。

我該如何解決這個問題？

下面是相關的CSS：

#reviews { 
background-color: #16ff21; //green 
float: right; 
text-align: left; 
text-indent: 40px; 
width: 40%; 
height: 150px; 
} 
#rating { 
background-color: #ff114b; //red 
float: right; 
width: 40%; 
text-align: center; 
font-size: 200%; 
height: 150px; 
} 
#validFor { 
background-color: #19ceff; //blue 
float: right; 
width: 40%; 
text-align: center; 
font-size: 200%; 
height: 150px; 
} 
#stats { 
background-color: #ffe8e5; //pink 
width: 40%; 
float: right; 
vertical-align: middle; 
text-align: center; 
font-size: 250%; 
}

這裏是所有在那裏父DIV：

#description { 
text-align: left; 
width: 100%; 
}

而且#description的父DIV：

#main { 
background-color: #d3ffd3; 
margin-left: auto; 
margin-bottom: 0; 
margin-right: auto; 
padding: 10px; 
width: 75%; 
text-align: center; 
overflow:hidden; 
}

來源

2011-02-17 AKor

添加明確：權利;除了第一個div，你想要與右邊界齊平。否則，如果它們有寬度，多個右浮動的div將在同一行上彼此相鄰。

來源

2011-02-17 02:41:40 Summer

注意：添加明確：由於您的單個左浮動元素，兩者都可能會產生意想不到的後果。如果你使用clear：both，那麼應用div的那個div就會出現在之前的左和右浮動元素之下，如果你的左浮動div的高度更高，這就好像是一個問題。 – Summer 2011-02-17 03:05:06

有你添加「明確：左或明確：兩者」的漂浮的權利？我可能不完全理解這個問題。將代碼發佈到某處並讓我們看看，也可能是由於XHTML結構。此外，不知道它是否在你的真實代碼，但//是一個JS評論。/*comment*/是CSS

編輯* ** 只使用一個.clear {明確：既;}並將其應用到每個孩子的div。對我來說工作得很好。下面的代碼：

.clear {明確：既;}

.clear {clear: both;}

<body> 
<div id="main"> 
<div id="validFor" class="clear"></div> 

<div id="reviews" class="clear"></div> 

<div id="rating" class="clear"></div> 

<div id="stats" class="clear"></div> 

</div> 
</body> 
</html>

來源

2011-02-17 02:40:27

我認爲你需要clear:both，使得彩車出現一個下等

來源

2011-02-17 02:42:07 Rafal

如果我理解你的問題，你有麻煩「浮動」定位您的股利。您應注意這種情況下：假設你有4格分別是：

[div 1][div 2][div 3][div 4] 

[div 1]: float left 
[div 2,3,4]: float right

的影響將顯示：

[div 1][div 4][div 3][div 2]

這是因爲CSS樣式元素由左到右，並在div是誰「lefter」優先。希望這可以幫助。

來源

2011-02-17 03:27:59

不正確的浮動

回答

相關問題