html - 使用 float 时保持底部边距

Question

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

我尝试在行类上使用“clearfix: both”和“overflow: auto”。

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

    ...
}