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

Question

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

我创建了一个parentrow和4个children。

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

（忽略 class 的 class 名称，因为我正在使用 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 个单元格，下一行是第四个单元格。

结果应该是这样的

hi hi hi hi

但实际结果是

hi hi hi hi

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

Answer 1

查看您的代码笔示例，您正在设置 margin-right。

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

删除它会得到所描述的四列。

以后请包含与您的问题相关的所有代码。

Answer 2

您不应该在计算中划分边距。它应该在外面，或者您将删除小于为每个元素设置的边距。您正在设置 X 边距并且仅删除 X/4 因此每个元素将 25% - X/4 + X （最后一个 25% - X/4）作为 space 因此总数将是 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>

如果您需要 space 行为之间（这是您想要的），您可以这样做：

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

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

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

Trying to create a row with 4 cells

css

sass

scss-mixins