CSS：如何在另一个div中获得两个浮动div
我确定这是一个常见问题，但找不到确切的答案:)
我有另一个div内的两个div。 我想让两个div位于同一层，一个浮动到左边，另一个在右边。 但是，除非父母使用position: absolute ，否则他们不会进入父div。 但是，那么孩子们不会保持在同一个水平上：S
#main {
margin-left: 30px;
margin-top: 20px;
position: absolute;
}
#left_menu {
width: 150px;
float: left;
}
#content {
margin-left: 20px;
float: right;
border: 1px solid white;
}
<div id ="main">
<div id ="left_menu>&blablabal</div>
<div id ="content">blablb</div>
</div>
#content margin-left应该包含#left_menu的宽度。 因此应该是
#content {
margin-left: 170px;
/* float: right; */ /* no need for a float here */
border: 1px solid white;
}
你也不需要一个position:absolute的你的#main （除非其他目的）
最后：
<style type="text/css"><!--
#main {
margin-left: 30px;
margin-top: 20px;
}
#left_menu {
width: 150px;
float: left;
}
#content {
margin-left: 170px;
border: 1px solid white;
}
.c{clear:both;}
--></style>
<div id="main">
<div id="left_menu>&blablabal</div>
<div id="content">blablb</div>
</div>
<div class="c"></div>
.c将清除并将底部内容从浮游物中推出。
这与它在容器上的宽度有关。
这对我有用。
<style type="text/css"><!--
.Content{
Width:100%;
}
.FloatLeft{
float:left;
}
.FloatRight{
float:Right;
}
-->
</style>
<div class="Content">
<div class="FloatLeft"></div>
<div class="FloatRight"></div>
</div>
您需要'浮动'主div，或者在内容和左菜单<div>之后使用清除<div>或<br> 。