Question

我有一个父div，它有一堆子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;
}

Answer 1

添加明确：正确;除了第一个div，你想要与右边界齐平。否则，如果它们有宽度，则多个右浮动的div将在同一行上彼此相邻。

Answer 2

你是否向那些浮动的人添加了“clear：left或clear：both”？我可能不完全理解这个问题。将代码发布到某处，我看看，也可能是由于XHTML结构。此外，不确定它是否在您的真实代码中，但//是一个js评论。 / *comment*/是css

编辑*的 ** 只需使用.clear {clear：both;}并将其应用于每个子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>

Answer 3

我认为您需要clear:both以便浮动显示在另一个

之下

Answer 4

如果我理解你的问题，你就很难用“＃34; float＆＃34;”来定位你的div。你应该注意这种情况：假设你有4个div：

[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从左到右调整元素的样式，以及＆＃34; lefter＆＃34;优先考虑。希望这会有所帮助。

Div没有正确漂浮

4 个答案: