Question

这可能看起来像平常如何居中浮动问题，但我需要居中浮动div的原因是因为其他div容器也具有浮动属性。我设置了一个高度auto来确定高度取决于包装器div内的对象，在包装器div中有2个浮点div并排放置。但是，如果我没有在包装器上指定一个浮点数，则包装器div只会显示1个直接行（不包装任何内容）

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居中而不删除浮动或其他方式来实现这一点？感谢

Answer 1

如果.wrapper的所有内容都已浮动，则需要清除它们。

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

然后您应该能够添加：

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

你的包装将会居中。

使用float属性居中div

1 个答案: