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或者在没有浮动的情况下将它们居中...显示：内联块对于子div不起作用，因为它们具有不同的高度而一个div是图像。 ..所以我认为最好的方法是浮动它们并优化边距...在这种情况下，我希望父div在屏幕中居中，所以我使用margin：0 auto而不是float但这会导致子div不伸展父div，它显示为细线。

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

由于

Answer 1

你需要的是给父div：overflow:hidden;所以它可以包含它的子div。

子div会相互浮动，但是当你重新调整浏览器的大小时，它们会相互浮动，为了避免这种情况，你可以给父div min-width。

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

由于你选择使用花车而不是inline-block，所以剩下的就是像你说的那样处理margins。

DEMO

Answer 2

如果我理解正确，你想把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>

demo

Answer 3

由于所有子div的宽度都小于父母的宽度，因此它们应该自然并排排列。尝试给每个孩子一个位置：相对;保证金：自动。这样他们就应该把自己置于父母的中心

Answer 4

父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 5

容器div的浮点数和它的子div的浮点值（或没有浮点数）是相互独立的，你只需要在关闭父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/

如何在divlo里面浮动一个div？

5 个答案: