calc函数可将容器中多余的空间留在容器中，尽管儿童的积水总和要减去排水沟

Question

一个容器中有2个孩子，它们应占用相等的空间，减去水平装订线（6rem）。

我尝试使用这些计算来确定孩子的身材：

• calc（50％-3rem）
• calc（（100％-6rem）/ 2）

但是，您看到的the bellow picture都留下了多余的空间（容器为灰色，子级为红色）。

SCSS代码：

.row {
  max-width: 114rem;
  background-color: #eee;
  margin: 0 auto;
  .col-1-of-2 {
    width: calc(50% - 3rem);
    background-color: orangered;
    float: left;
    &:not(last-child) {
      margin-right: 6rem;
    }
  }
}

/*Generated CSS from SCSS*/

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

.row .col-1-of-2 {
  width: calc(50% - 3rem);
  background-color: orangered;
  float: left;
}

.row .col-1-of-2:not(last-child) {
  margin-right: 6rem;
}

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

我的问题是：我怎么让两个孩子都拿走50％的容器减去檐槽？

Answer 1

除非确实需要，否则避免使用浮点数进行定位，否则它们将不可靠。
我假设您不使用引导程序。
将您的.row设置为display: flex，并将其命名为justify-content: space-around。
然后将您的.col-1-of-2设置为width: calc(50% - 3rem)。
这样，您将在左边有1.5rem，在右边有相同的3rem。 无需做任何其他弄乱边距和填充的事情。

请记住，百分比宽度基于容器width，而不是基于容器max-width，因此即使是其他百分比，您也需要指定该百分比宽度。

Answer 2

您需要这样写：

.row .col-1-of-2:not(:last-child) {
  margin-right: 6rem;
}