Html 包装中3个箱子的水平对齐

哎,， 我现在正在玩CSS3，遇到了一个问题，使用了三个div框。 我希望它们在包装盒中水平对齐，而不必指定确切的边距

我的做法是：

.box1 {
background: gray;
float: left;
width: 250px;
padding: 3px;
margin: 0 auto;
}

.box2 {
background: gray;
float: left;
width: 250px;
padding: 3px;
margin: 0 auto; 
}

.box3 {
background: gray;
float: left;
width: 250px;
padding: 3px;
margin: 0 auto;
}

---

这将导致三个框向左对齐到包装框，它们之间没有任何边距。但是我希望框设置边距，所以框在红色包装中居中。在没有精确像素设置的情况下，你有没有办法做到这一点？

嗯。你不能在浮动值上使用自动边距。 我会给他们精确的像素边距。更多的控制

你希望不知道红色包装的宽度吗

此外，所有这些类都是相同的，只需将其称为“box”，并将其重新用于所有的box

.box{
  background: gray;
  float: left;
  width: 250px;
  padding: 3px;
  margin: 3px;
}

<div id="red-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.box{
背景：灰色；
浮动：左；
宽度：250px；
填充：3倍；
保证金：3倍；
}

编辑： （我在考虑这个问题。我想我会分享一个不同的结构，它可能会给你你想要的结果。）

.bigbox{
宽度：33%；
浮动：左；
}
.盒子{
背景：灰色；
宽度：200px；
填充：3倍；
利润率：3倍自动；
}
#红色包装纸{
宽度：100%；
背景：红色；
溢出：隐藏；
}

---

如果内联块适合您的用途，它可能会有所帮助

我遇到了这个问题，我使用了Flex box。

---

放大时，可以将其包裹以适合元素。

是否希望包裹的框在包裹中居中？否则删除边距：0自动；只把它放在包装上这就是我想要的，是的。把三个盒子包装在一个不可见的div元素中，用边距将div元素居中：0 auto；然后调整方框中的边距当前有意可见的包装已居中。这不应该是一样的吗？如果你在那个可见的包装上有一个显式的大小，并且你希望你的元素在这个包装内居中，那就不应该了。好吧，我肯定要计算所有的边距？糟透了。哇，这又回答了我要问的问题。欢迎来到StackOverflow。请不要只提供链接答案：如果链接断开，答案将变得无关紧要。把最重要的部分直接放在你的帖子上：这样，你也可以更容易、更快地理解。顺致敬意，

.bigbox{
  width:33%;
  float:left;
}

.box {
  background: gray;
  width: 200px;
  padding: 3px;
  margin: 3px auto;
}

#red-wrapper {
  width:100%;
  background:red;
  overflow:hidden;
}

<div id="red-wrapper">
  <div class="bigbox">
    <div class="box"> </div>
  </div>
  <div class="bigbox">
    <div class="box"></div>
    </div>
  <div class="bigbox">
    <div class="box"></div>
  </div>
</div>