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

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

您是否希望不知道红色包装的宽度？

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

.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

如果它适合您的目的，内联块可能有所帮助。 Fiddle

Answer 3

我遇到了这个问题而且我使用了Flex盒子。 https://www.w3schools.com/css/css3_flexbox.asp 您可以在放大时将其换行以适合元素。

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

3 个答案: