Question

我正在尝试使用“ float：left”创建网格布局，但这导致第二行忽略指定的下边距，并直接在第一行下方向上移动。但是，第二行和第三行之间的边距按预期工作。

我已经尝试在行类上使用“ clearfix：同时使用”和“ overflow：自动”。

    <div class="row one">
      <div class="col-1-of-2">Col 1 of 2</div>
      <div class="col-1-of-2">Col 1 of 2</div>
    </div>

    <div class="row two">
      <div class="col-1-of-3">Col 1 of 3</div>
      <div class="col-1-of-3">Col 1 of 3</div>
      <div class="col-1-of-3">Col 1 of 3</div>
    </div>

    <div class="row three">
      <div class="col-1-of-3">Col 1 of 3</div>
      <div class="col-2-of-3">Col 2 of 3</div>
    </div>

.row {
  max-width: 114rem;
  background-color: #eee;
  margin: 0 auto;           

  &:not(:last-child){
      margin-bottom: 8rem; 
  }

  .col-1-of-2 {
    width: calc((100% - 6rem) / 2); 
    background-color: orangered;
    float: left;

    &:not(:last-child) {
      margin-right: 6rem; 
    }
  }
}

我希望在第一行和第二行之间应用8rem的页边距。

Answer 1

您可以将第一行设为display: flex;

.row {
    .one {
        display: flex;
    }

    ...
}

Answer 2

您可以添加：

.row:not(:last-child){
  width: 100%;
  float: left;
}

或：

.row:not(:last-child){
  overflow: hidden;
}

使用浮点数时保持底边

2 个答案: