0

我正在尝试用 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>

（忽略类的类名，因为我正在使用反应）

和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

4

2 回答 2

1

您不应该在计算中划分保证金。它应该在外部，否则您将删除少于为每个元素设置的边距。您正在设置X边距并且仅删除X/4，因此每个元素将25% - X/4 + X（最后一个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>

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

于 2019-01-13T19:38:51.467 回答
0

查看您的 codepen 示例，您正在设置一个margin-right.

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

删除它会为您提供所描述的四列。

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

于 2019-01-13T19:31:21.317 回答