如何对齐三个相等的水平框及其周围的空间

Question

我想把三个盒子排成一行。我正在使用 Foundation：

<div class="row">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

我希望它们是width:32%，第一个在最左边，第二个在中间，第三个在最右边。

我试过 flexbox 的 justify-content: space-around 但外面的盒子不在正确的位置。我尝试了列，但中间的列向左浮动。

Answer 1

您可以使用 Flexbox，如下所示：

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
.box {
  width: 32%;
  flex: 1;
  background: red;
  height: 150px;
  margin-right: 20px; /* You can change it to increase/decrease the space between boxes */
}
.box:last-child {
  margin-right: auto;
}

<div class="row">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

它们将垂直和水平对齐。

Answer 2

首先，添加.box { position: relative; }。在第一个 div 的样式中，添加 left: 0%;，在第二个 div 中添加 left: 34%;，在第三个中添加 right: 0%;.

Answer 3

您可以使用 flex 和 margin auto 使第一个和最后一个元素卡在 left/right 一侧：

.row {
  display: flex;
  border: 1px solid;
}

.box {
  flex: 0 0 32%; /* or simply width:32%; */
  height: 50px;
  background: green;
}

.box:first-child {
  margin-right: auto;
}

.box:last-child {
  margin-left: auto;
}

<div class="row">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

Answer 4

您可以使用 justify-content: space-between 来实现它，因为它的目的正是实现您想要实现的目标：

.row {
  display: flex;
  justify-content: space-between;
  border: 1px solid;
}

.box {
  flex: 0 0 32%;
  height: 20px;
  background: Aquamarine;
}

<div class="row">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

如何对齐三个相等的水平框及其周围的空间

How to align three equal horizontal boxes with spaces around them

html

css

flexbox

zurb-foundation