CSS Susy 画廊 - 居中最后一行与 nth-last-child答案

【问题标题】：CSS Susy Gallery - Center Last Row with nth-last-childCSS Susy 画廊 - 居中最后一行与 nth-last-child
【发布时间】：2016-12-19 14:02:07
【问题描述】：

我有一个 4 列的 Susy CSS 画廊网格，可以包含任意数量的块。如果最后一行的块数少于 4 个，我需要将其居中。

使用这种 css 选择器技术http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ 我已经能够偏移特定的块，正如你在这支笔中看到的那样：http://codepen.io/bennyb/pen/kXVaba

使用此代码：

// Total of 1 or 5
ul li:first-child:nth-last-child(1),
ul li:first-child:nth-last-child(5) + li + li + li + li { 
    @include push(4.5);
}

// Total of 2 or 6
ul li:first-child:nth-last-child(2),
ul li:first-child:nth-last-child(6) + li + li + li + li { 
    @include push(3);
}

ul li:first-child:nth-last-child(2) + li,
ul li:first-child:nth-last-child(6) + li + li + li + li + li { 
    @include push(6);
}

// Total of 3 or 7
ul li:first-child:nth-last-child(3),
ul li:first-child:nth-last-child(7) + li + li + li + li { 
    @include push(1.5);
}

ul li:first-child:nth-last-child(3) + li,
ul li:first-child:nth-last-child(7) + li + li + li + li + li { 
    @include push(4.5);
}

ul li:first-child:nth-last-child(3) + li + li,
ul li:first-child:nth-last-child(7) + li + li + li + li + li + li {
    @include push(7.5);
}

如您所见，它仅在少于 8 个项目时才有效。有谁知道我可以如何改进它，以便它可以与任意数量的项目一起使用，也许可以使用 SASS 混合。

更新

这里是根据 vals 的回答更新的 CSS：

// One widow
ul li:first-child:nth-last-child(1),
ul li:first-child:nth-last-child(4n + 1) ~ li:nth-last-child(1) { 
    @include push(4.5);
}

// Two widows
ul li:first-child:nth-last-child(2),
ul li:first-child:nth-last-child(4n + 2) ~ li:nth-last-child(2) { 
    @include push(3);
}
ul li:first-child:nth-last-child(4n + 2) ~ li:nth-last-child(1) { 
    @include push(6);
}

// Three widows
ul li:first-child:nth-last-child(3),
ul li:first-child:nth-last-child(4n + 3) ~ li:nth-last-child(3) { 
    @include push(1.5);
}
ul li:first-child:nth-last-child(4n + 3) ~ li:nth-last-child(2) { 
    @include push(4.5);
}
ul li:first-child:nth-last-child(4n + 3) ~ li:nth-last-child(1) { 
    @include push(7.5);
}

【问题讨论】：

不……即使是 SASS Mixin 也必须输出 CSS……你又回到了开始的地方。

标签： html css susy

【解决方案1】：

不太了解 Susy，但让我们看看如何定位最后一行的特定元素。红色选择器只是为了说明它是如何工作的，并且会在生产代码中被删除

/* target list with only 1 element in the last row */
li:first-child:nth-last-child(4n + 1) { 
    background-color: red;
}

/* target last element of list with only 1 element in the last row */
li:first-child:nth-last-child(4n + 1) ~ li:nth-last-child(1) { 
    background-color: blue;
}

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>

/* target list with 2 elements in the last row */
li:first-child:nth-last-child(4n + 2) { 
    background-color: red;
}

/* target last elements of list */
li:first-child:nth-last-child(4n + 2) ~ li:nth-last-child(2) { 
    background-color: green;
}li:first-child:nth-last-child(4n + 2) ~ li:nth-last-child(1) { 
    background-color: blue;
}

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>

/* target list with 3 elements in the last row */
li:first-child:nth-last-child(4n + 3) { 
    background-color: red;
}

/* target last elements of list */
li:first-child:nth-last-child(4n + 3) ~ li:nth-last-child(3) { 
    background-color: yellow;
}
li:first-child:nth-last-child(4n + 3) ~ li:nth-last-child(2) { 
    background-color: green;
}
li:first-child:nth-last-child(4n + 3) ~ li:nth-last-child(1) { 
    background-color: blue;
}

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>

【讨论】：