1

我对 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-block 不适用于子 div，因为它们的高度不同，一个 div 是图像...所以我认为最好的方法是浮动它们并优化边距......在这种情况下，我希望父 div 在屏幕上居中，所以我使用 margin:0 auto 而不是 float 但这会导致子 div 不拉伸父 div，它显示为一条细线。

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

谢谢

4

5 回答 5

1

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

子 div 将浮动在彼此旁边，但是当您重新调整浏览器大小时，它们会浮动在彼此下方，为避免这种情况，您可以给父 div 一个min-width.

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

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

演示

于 2013-02-12T00:52:50.233 回答
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>

演示

于 2013-02-12T00:53:08.100 回答
1

由于所有子 div 的宽度都小于父 div 的宽度，因此它们自然应该并排排列。尝试给每个子 div 一个位置：relative; 边距：自动。这样他们应该以父母为中心

于 2013-02-12T00:53:33.383 回答
1

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

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

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

看这个演示：

http://jsfiddle.net/c2NjZ/

有关清除修复的旧浏览器支持的说明，请参见：

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

于 2013-02-12T00:57:50.153 回答
1

容器 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/

于 2013-02-12T00:58:30.980 回答