如何在未浮动的div中浮动div

Question

我有一个关于div的简单问题。如何在一个未浮动的DIV中浮动3个DIV？

这是我的代码：

<div style="margin:0 auto;width:1240px;border:1px solid #000000;">
    <div style="width:200px;height:50px;float:left;border:1px solid #000000;">
        test    
    </div>
    <div style="width:200px;height:50px;float:left;border:1px solid #000000;">
        test    
    </div>
    <div style="width:200px;height:50px;float:left;border:1px solid #000000;">
        test    
    </div>
</div>

我想在这个父DIV中浮动子DIV，或者在不浮动的情况下使它们居中。。。display:inline块不适用于子div，因为它们具有不同的高度，并且一个div是一个图像。。。所以我认为最好的方法是浮动它们并优化利润。。。在这种情况下，我希望父div在屏幕上居中，所以我使用margin:0auto而不是float，但这导致子div没有拉伸父div，而是显示为一条细线。

你可以测试我创建的小提琴来理解问题：http://jsfiddle.net/tQpM5/

感谢

Answer 1

如果我理解正确，你想在同一行居中放置3个盒子：

.wrapper{
  margin:0 auto;
  text-align:center;
  vertical-align: top;
}
.box{
  width:200px;
  height:50px;
  display:inline-block;
  text-align:left;
}

HTML:

<div class="wrapper">
  <div class="box"> 1 </div>
  <div class="box"> 2 </div>
  <div class="box"> 3 </div>
</div>

演示

Answer 2

由于所有子div的宽度都小于父div的宽度，因此它们应该自然地并排排列。试着给每个子div一个位置：relative；边距：自动。通过这种方式，它们应该以父为中心

Answer 3

父div显示为一行，因为其内容是浮动的，并将其高度设置为1px。要解决此问题，您需要清除此元素之后的浮动。通常被称为clearfix。

.clearfix:after {
  clear: both;
  content: "";
  display: table;
}

然后你可以像往常一样让孩子们漂浮起来。我在父对象上使用了margin:auto使其居中。

查看此演示：

http://jsfiddle.net/c2NjZ/

关于clearfixing上旧浏览器支持的注意事项，请参阅：

http://css-tricks.com/snippets/css/clear-fix/

Answer 4

容器div的float和它的子div的floast值（或无float）是相互独立的，您只需要在关闭父div之前清除子div的：

<style type="text/css">
.clearfloat {clear:both;height:0;font-size:1px;line-height:0px;}
</style>
<div class="parent">
    <div class="child" style="float:left;">
        Hi
    </div>
    <div class="child" style="float:right;">
        There
    </div>
    <br class="clearfloat">
</div>

更新到您的示例：http://jsfiddle.net/tQpM5/2/

Answer 5

您需要的是给父div：overflow:hidden;，这样它就可以包含其子div。

子div将彼此浮动，但是当您调整浏览器大小时，它们将彼此浮动在一起，为了避免这种情况，您可以给父div一个min-width。

要使父div居中，可以给它一个margin-left:auto; margin-right:auto;，但必须指定一个宽度，这样它就不会拉伸并占用所有可用宽度。

既然您选择使用float而不是inline-block，那么剩下的就是像您所说的那样处理margins。

演示