Question

当装订线设置为固定时，装订线将作为填充而不是边距添加。

因此，当您使用@include float-span(4, last);将最后一列设置为最后一列时，例如，最后一列会丢失其装订线，但会占用整个可用空间，如下所示：

https://www.sassmeister.com/gist/6c12c4c8a67db11fee0dc3c8529097b4（我已经让排水沟变得非常大，以便您可以更轻松地看到差异）

这是使用过的scss：

// settings.scss
@include add-grid(12);
@include add-gutter-style('opposite');
@include add-gutter(150px);

// style.scss
* {
  box-sizing: border-box;
}

.view-content {
  height: 10rem;
}

.views-row {
  height: 10rem;
  @include float-span(4);
  &:nth-child(3n + 3) {
    @include float-span(4, last);  
  }
}

.views-row__inner {
  background: yellow;
}

＆＃13;

* {
  box-sizing: border-box;
}

.view-content {
  height: 10rem;
}

.views-row {
  height: 10rem;
  -sgs-span-settings: ("span": 4, "location": 1, "grid": 12, "gutter": 150px, "style": "opposite", "start row": true, "end row": false, "fixed gutter": true, "split gutter": null, "gutter property": "padding", "options": (null: null));
  width: 33.33333%;
  clear: right;
  float: left;
  padding-right: 150px;
}
.views-row:nth-child(3n + 3) {
  -sgs-span-settings: ("span": 4, "location": 9, "grid": 12, "gutter": 150px, "style": "opposite", "start row": false, "end row": true, "fixed gutter": true, "split gutter": null, "gutter property": "padding", "options": (null: null));
  width: 33.33333%;
  clear: right;
  float: right;
  padding-right: 0;
}

.views-row__inner {
  background: yellow;
}

＆＃13;

<div class="view-content">
  <div class="views-row"><div class="views-row__inner">good</div></div>
  <div class="views-row"><div class="views-row__inner">good</div></div>
  <div class="views-row"><div class="views-row__inner">bad</div></div>
</div>

＆＃13;

这是预期的行为吗？我错过了什么吗？

理想情况下，我希望有固定的装订线，所有列完全相同，但与容器对齐。

奇点网格固定排水沟问题

0 个答案: