Question

我需要将这两个元素左右浮动，以形成一个简单的网格。我从SCSS教程尝试过此方法，但是我遇到了一些问题，请帮忙。根据我的尝试，它们漂浮在两行中。我只需要一行和两列。

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

这是SCSS

.row {
  max-width: 1400px;
  background-color: rgb(207, 207, 207);
  margin: 0 auto;
  &:not(:last-child) {
    //.row:not
    margin-bottom: 3rem;
  }

  .col-1-of-2 {
    width: calc((100%-3rem) / 2);
    background-color: orangered;
    float: left;
    &:not(:last-child) {
      margin-right: 3rem;
    }
  }
}

Answer 1

有很多方法可以实现它。

一种简单快捷的方法是将display: flex添加到容器中，并将flex-grow添加到子元素中（我添加了padding和border只是为了使其更加清晰。因为它只是css，所以在SCSS中好）。

.row {
  display: flex;
}

.col-1-of-2 {
  flex-grow: 1;
  padding: 1rem;
  border: 1px solid black;
}

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

如何浮动这两个元素并排共享类？

1 个答案: