Question

我想连续三个盒子彼此相邻。我正在使用基金会：

future.get()

我希望它们是<div class="row"> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> </div>，第一个位于最左侧，第二个位于中间，第三个位于最右侧。

我尝试过flexbox的width:32%，但外面的盒子不在正确的位置。我试过了列，但中间的一个漂浮在左边。

Answer 1

你可以使用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>

Answer 2

你可以使用flex并使用margin auto来使第一个和最后一个元素粘在左/右边：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以使用 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 4

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

如何对齐三个相等的水平方框，周围有空格

4 个答案: