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

我对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，并且它显示为细线

您可以测试我创建的小提琴以了解问题：

---

谢谢

您需要的是给父div:overflow:hidden；因此它可以包含其子div

子div将浮动在彼此旁边，但是当您调整浏览器大小时，它们将浮动在彼此下面，为了避免这种情况，您可以为父div指定最小宽度

要使父div居中，可以给它留一个左边距：auto；右边距：自动；，但是，您必须指定一个宽度，使其不会拉伸并采用其所有可用宽度

既然您选择使用浮点数而不是内联块，那么剩下的唯一事情就是像您所说的那样处理边距

---

您需要的是给父div:overflow:hidden；因此它可以包含其子div

子div将浮动在彼此旁边，但是当您调整浏览器大小时，它们将浮动在彼此下面，为了避免这种情况，您可以为父div指定最小宽度

要使父div居中，可以给它留一个左边距：auto；右边距：自动；，但是，您必须指定一个宽度，使其不会拉伸并采用其所有可用宽度

既然您选择使用浮点数而不是内联块，那么剩下的唯一事情就是像您所说的那样处理边距

---

如果我理解正确，您希望在同一行上居中放置3个框：

.wrapper{
  margin:0 auto;
  text-align:center;
  vertical-align: top;
}

.box{
  width:200px;
  height:50px;
  display:inline-block;
  text-align:left;
}

HTML:

---

如果我理解正确，您希望在同一行上居中放置3个框：

.wrapper{
  margin:0 auto;
  text-align:center;
  vertical-align: top;
}

.box{
  width:200px;
  height:50px;
  display:inline-block;
  text-align:left;
}

HTML:

---

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

因为所有子对象的div宽度都小于父对象的div宽度，所以他们应该自然地并排排列。试着给每个孩子一个位置：相对；保证金：自动。通过这种方式，他们应该将自己置于父div的中心，因为父div的内容是浮动的，所以父div显示为一条线，并将其高度设置为1px。要解决此问题，需要清除此元素后的浮动。通常被称为clearfix

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

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

请参阅此演示：

注意：有关clearfixing上的旧浏览器支持，请参见：

---

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

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

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

请参阅此演示：

注意：有关clearfixing上的旧浏览器支持，请参见：

---

容器div的float及其子div的float值或no 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>

---

更新您的示例：

容器div的float及其子div的float值或no 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>

---

更新您的示例：

您能否完成对所有正在处理的div和图像的处理，以便我们更容易地理解您的意思？您需要清除浮动。有很多技术可以做到这一点。我认为，如果同时使用垂直对齐：顶部，显示：内联块就可以很好地工作。但是，呃，代码引用了我服务器上的图像和样式，因此无法将它们发布到那里…我只是希望这个概念能够实现这一不精确的测量…谢谢：你能完成你正在处理的所有div和图像的处理，以便我们更容易地理解你的意思吗？你需要清除浮动。有很多技术可以做到这一点。我认为，如果同时使用垂直对齐：顶部，显示：内联块就可以很好地工作。但是，呃，代码引用了我服务器上的图像和样式，因此无法将它们发布到那里……我只是希望这个概念能够实现这一不精确的测量……谢谢：注意，旧浏览器基本上是指IE7注意，旧浏览器基本上是指IE7：垂直对齐：顶部；诀窍：问题在于垂直对齐，因为一个div看起来比另外两个div高，并且所有div在父div内都在同一行上…所以问题在于垂直对齐…谢谢：dvertial align:top；成功了：问题出在 垂直对齐，因为一个div看起来比另外两个div高，并且所有div在父div内都在同一条线上…所以问题在于垂直对齐它们…谢谢：D