包装中3个盒子的水平对齐

Question

嘿，我现在正在玩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;
}

这导致三个框向左对齐到包装框，它们之间没有任何边距。但我想让盒子设置边距，这样盒子就在红色包装纸的中心。有什么想法可以在没有精确像素设置的情况下做到这一点吗？

Answer 1

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

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

此外，所有这些类都是相同的，只需将其称为"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>

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

.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>

jsFiddle

Answer 2

如果它适合您的目的，内联块可能会有所帮助。不停摆弄

Answer 3

我遇到了这个问题，我使用了Flex box。https://www.w3schools.com/css/css3_flexbox.asp放大时可以将其包裹以适合元素。