Html 如何使波旁威士忌中的多行整齐？_Html_Css_Neat

Html 如何使波旁威士忌中的多行整齐？

html css

Html 如何使波旁威士忌中的多行整齐？,html,css,neat,Html,Css,Neat,我试着将我的文章放在一个简单的网格上，并与之对齐 html： <body> <section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> <article>5</article> <

我试着将我的文章放在一个简单的网格上，并与之对齐

html：

<body>
  <section>
    <article>1</article>
    <article>2</article>
    <article>3</article>
    <article>4</article>
    <article>5</article> <!-- << comment this to solve the problem -->
  </section>
</body>

这个

如您所见，第四和第五篇文章被发送到下一行

当第五篇文章被评论时，第四篇文章正确地保留在第一行

如何获得一行四篇文章？

简短回答必须删除行最后一项的右边距。在Neat中，您可以为此目的使用：

section {
  @include outer-container;
  article {
    @include span-columns(3);
    @include omega(4n);
  }
}

长话短说章节中的最后一篇文章没有

页边空白

section article:last-child {
  margin-right: 0;
}

当你在一个部分中有5篇文章时，第4篇不是最后一篇，所以它有一个页边空白，这迫使它进入下一行。删除第5行时，第4行将成为最后一行，其边距将被删除，从而使其适合该行

您可以删除第4篇文章的页边空白，如下所示：

section article:nth-of-type(4) {
  margin-right: 0;
}

如果您想要多行4篇文章，这可能会有问题。更好的方法是更改HTML标记

<section>
    <article>1</article>
    <article>2</article>
    <article>3</article>
    <article>4</article>
</section>
<section>
    <article>5</article>
    <article>6</article>
    <article>7</article>
    <article>8</article>
</section>


1.
2.
3.
4.
5.
6.
7.
8.

<section>
    <article>1</article>
    <article>2</article>
    <article>3</article>
    <article>4</article>
</section>
<section>
    <article>5</article>
    <article>6</article>
    <article>7</article>
    <article>8</article>
</section>