不正确的浮动

我有一个父母的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

不正确的浮动

回答

相关问题