css - 尝试创建包含 4 个单元格的行

Question

我正在尝试创建包含 4 个单元格的行，但我不知道为什么它不起作用。

我已经创建了一个父级 row 和 4 个子级。

<div className='row'>
                <div className='col-1-of-4'>
                    hi
                </div>
                <div className='col-1-of-4'>
                    hi
                </div>
                <div className='col-1-of-4'>
                    hi
                </div>
                <div className='col-1-of-4'>
                    hi
                </div>
            </div>

(忽略类的类名，因为我正在使用 react)

css 属性是:

[class^="col-"] {
        float: left;
        &:not(:last-child) {
            margin-right: $gutter-horizontal;
        }  
    }

.col-1-of-4 {
    width: calc((100% - #{$gutter-horizontal}) / 4);
}

它的作用是，计算总宽度，然后减去边距，然后除以 4。从技术上讲，它应该可以工作，我应该能够连续看到 4 个单元格。但我得到的结果是，连续 3 个单元格，第四个单元格在下一行。

结果应该是这样的

嗨嗨嗨嗨

但实际结果是

嗨嗨嗨
你好

这是工作代码 https://codepen.io/sarmad1995/pen/REYXBV?editors=1100

Answer 1

您不应该在计算中划分边距。它应该在外面，或者您将删除小于为每个元素设置的边距。您正在设置 X 边距并且仅删除 X/4 因此每个元素将占用 25% - X/4 + X(最后一个 code>25% - X/4) 作为一个空格，因此总和将为 100% + 2X，大于 100%。

.col-1-of-4 {
    width: calc(100% / 4  - #{$gutter-horizontal});
}

.row {
  max-width: 114rem;
  margin: 0 auto;
}
.row:not(:last-child) {
  margin-bottom: 8rem;
}
.row::after {
  content: "";
  display: table;
  clear: both;
}
.row [class^="col-"] {
  float: left;
}
.row [class^="col-"]:not(:last-child) {
  margin-right: 6rem;
}
.row .col-1-of-4 {
  width: calc(100%  / 4 - 6rem);
  background-color: red;
}

<div class='row'>
  <div class='col-1-of-4'>
   hi
  </div>
  <div class='col-1-of-4'>
   hi
  </div>
  <div class='col-1-of-4'>
   hi
  </div>
  <div class='col-1-of-4'>
  hi
  </div>
</div>

如果您需要在行为之间留出空间(这是您想要的)，您可以这样做:

.col-1-of-4 {
    width: calc(100% / 4  - 3*#{$gutter-horizontal}/4);
}

你也可以这样写:

.col-1-of-4 {
     width: calc((100% - 3*#{$gutter-horizontal})/4);
 }

您需要从总宽度中删除 3 个边距(为前 3 个元素定义)，然后除以 4:

.row {
  max-width: 114rem;
  margin: 0 auto;
}
.row:not(:last-child) {
  margin-bottom: 8rem;
}
.row::after {
  content: "";
  display: table;
  clear: both;
}
.row [class^="col-"] {
  float: left;
}
.row [class^="col-"]:not(:last-child) {
  margin-right: 6rem;
}
.row .col-1-of-4 {
  width: calc(100%  / 4 - 3*6rem/4);
  background-color: red;
}

<div class='row'>
  <div class='col-1-of-4'>
   hi
  </div>
  <div class='col-1-of-4'>
   hi
  </div>
  <div class='col-1-of-4'>
   hi
  </div>
  <div class='col-1-of-4'>
  hi
  </div>
</div>

您应该对所有其他类应用相同的逻辑