Question

我正在尝试使用Neat的网格容器来创建两行三行，但第二行没有按预期启动，因为第一行中的文本长度不同。

HTML：

<section id="featuredpost">
  <div class="widget-wrap">
    <h3>Vehicula Justo Elit Mollis</h3>
    <article class="post">
      <a href="#">
        <img src="http://placehold.it/350x150">
      </a>
      <header>
        <h4>
          <a href="#">Fusce Commodo Ornare Venenatis Egestas</a>
        </h4>
      </header>
    </article>
    <article class="post">
      <a href="#">
        <img src="http://placehold.it/350x150">
      </a>
      <header>
        <h4>
          <a href="#">Fusce Commodo Ornare Venenatis Egestas</a>
        </h4>
      </header>
    </article>
    <article class="post">
      <a href="#">
        <img src="http://placehold.it/350x150">
      </a>
      <header>
        <h4>
          <a href="#">Fusce Commodo Ornare Venenatis Egestas</a>
        </h4>
      </header>
    </article>
    <article class="post">
      <a href="#">
        <img src="http://placehold.it/350x150">
      </a>
      <header>
        <h4>
          <a href="#">Fusce Commodo Ornare Venenatis Egestas</a>
        </h4>
      </header>
    </article>
    <article class="post">
      <a href="#">
        <img src="http://placehold.it/350x150">
      </a>
      <header>
        <h4>
          <a href="#">Fusce Commodo Ornare Venenatis Egestas</a>
        </h4>
      </header>
    </article>
    <article class="post">
      <a href="#">
        <img src="http://placehold.it/350x150">
      </a>
      <header>
        <h4>
          <a href="#">Fusce Commodo Ornare Venenatis Egestas</a>
        </h4>
      </header>
    </article>
  </div>
</section>

SCSS：

.featuredpost {
  @include grid-container;
  .post {
    @include grid-column(4);
  }
}

以下是它出现的截图：

Example of problem with second row

正如您所看到的，因为第一行中第一个帖子的文本比第一行中的另外两个帖子的文本长，所以它在第二行引起了问题。我可以通过在post元素上设置min-height来解决这个问题，但必须有更好的方法。我正确使用Neat的网格吗？任何帮助表示赞赏！

Answer 1

您有几个选择。您最好的选择是使用nth-child选择器和clear: left;的组合。

在您的示例中，这将显示如下。

.post {
  @include grid-column(4);

  &:nth-child(3n+1) {
    clear: left;
  }
}

这将导致每四个帖子清除左侧的空格，确保其左侧没有任何内容，在这种情况下是超长的帖子标题。

Answer 2

你可以包装每个＆＃34;行＆＃34;在它自己的div中，使它们成为独立的网格容器。然后他们有一个内置的clearfix。

html的简化版本如下所示：

<div class="grid-row">
    <article class="post">
      ...
    </article>
    <article class="post">
      ...
    </article>
    <article class="post">
      ...
    </article>
</div>
<div class="grid-row">
    <article class="post">
      ...
    </article>
    <article class="post">
      ...
    </article>
    <article class="post">
      ...
    </article>
</div>

SCSS看起来像这样：

.grid-row {
  @include grid-container;
  .post {
    @include grid-column(4);
  }
}

以前建议的

方法

...    
&:nth-child(3n+1) {
clear: left;
}
...

确实会产生DRYer代码，特别是如果你有很多<article> s /行。

第二排整齐的网格不能正常工作

2 个答案: