以浮动属性为中心的div

这可能看起来像通常如何居中浮动问题，但我需要居中浮动div的原因是因为其他div容器也具有浮动属性。我已经设置了一个高度自动来确定高度取决于包装div内的对象，在包装div有2个浮动div使它并排。但是，如果我没有指定卷纸上出现浮动包装DIV只会显示1条staight线（不换任何东西）以浮动属性为中心的div

div.wrapper{ 
width: 1000px; 
height: auto; 
margin-top: 30px; 
float: left; 
border:1px solid gray; 
} 

div.leftcontainer{ 
width: 200px; 
height: auto; 
margin-top: 10px; 
margin-left: 10px; 
border:1px solid gray; 
float: left; 
} 

div.right container{ 
width: 750px; 
height: auto; 
margin-top: 10px; 
margin-left: 15px; 
margin-right: 15px; 
border:1px solid gray; 
float: right; 
}

，这是我的html代码

<div class ="wrapper"> 
<div class ="leftcontainer"> 
    some options 
</div> 
<div class = "rightcontainer"> 
    some options 
</div> 
<div class = "rightcontainer"> 
    some options 
</div> 

</div>

让我怎么做我的包装div中心没有删除浮动或其他方式来做到这一点？谢谢

来源

2012-01-16 3cross

你是什么意思：center a float div ?,如果你想中心一个div，删除浮动并放置保证金：0 auto – amd 2012-01-16 07:42:53

随着.wrapper的所有内容浮动，您需要清除它们。

在关闭.wrapper div之前，删除.wrapper上的浮动并添加<div style="clear:both;"></div>。

您应该然后能够补充：

div.wrapper { 
    /* ... */ 
    position:relative; 
    margin:0 auto; 
}

而且您的包装将居中。

来源

2012-01-16 07:44:17 lukiffer

嗯是的，它确实会居中。但是，但是，如果我有浮动div内的包装，包装不会环绕他们，而是表现为包装什么都没有。 – 3cross 2012-01-16 12:47:37

只要内部div是'position：relative;'而且你有一个div来清除两个内容（'

'），它将包含它的所有内容。 – lukiffer 2012-01-16 15:58:43

以浮动属性为中心的div

回答

相关问题