Question

我遇到了一些奇怪的行为，并且想知道我是否错误地使用了grid-column-row。

我有以下HTML结构：

<div id="homeTop">
  <!-- homeTop content such as headings and other nested rows and columns -->
</div>
<div id="homeMain">
  <div id="homeMain-left"></div>
  <div id="homeMain-right"></div>
</div>
<div id="homeBottom">
  <!-- homeBottom content such as headings and other nested rows and columns -->
</div>

然后，我有以下SCSS来设置此内容的样式：

#homeTop {
  @include grid-column-row;
}

#homeMain {
  @include grid-row;
}

#homeMain-left {
  @include grid-column(12);

  @include breakpoint(medium) {
    @include grid-column(8/12);
  }
}

#homeMain-right {
  @include grid-column(12);

  @include breakpoint(medium) {
    @include grid-column(4/12);
  }
}

#homeBottom {
  @include grid-column-row;
}

当我在桌面大小的屏幕上查看页面时，有一行css会导致homeBottom div向右浮动，这会抛弃布局。导致问题的CSS行在这里：

#homeBottom:last-child:not(:first-child) {
  float: right;
}

由于column-row是作为行和列的单个元素，换句话说，是一个全宽容器，我很困惑为什么我希望它有一个float属性。似乎这一行CSS对columns有意义，但不适用于column-rows，因为column-row行为不应取决于它是否是last-child的{{1}}父节点。

这是一个错误，还是我错误地使用了column-row？我只是想避免将homeBottom设置为grid-row，然后在其中包含一个额外的html元素，以充当全宽grid-column。正如您所看到的，homeTop不需要这样做，即使它也使用grid-column-row mixin。这让我觉得我可能错误地使用它。

我想另一种选择是定义我自己的my-grid-column-row mixin，其中包含float声明：

@mixin my-grid-column-row {
  @include grid-column-row;
  float: none !important;
}

但这似乎不应该是必要的。

Answer 1

看起来这是基础问题：

http://github.com/zurb/foundation-sites/issues/8108

我现在的解决方法是使用以下内容覆盖grid-column-row mixin：

@mixin grid-column-row(
  $gutter: $grid-column-gutter
) {
  @include grid-row;
  @include grid-column($gutter: $gutter);
  float: none !important;
}

Zurb Foundation 6使用grid-column-row mixin

1 个答案: