Question

我有一个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 mixin。

更新

这是基于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);
}

Answer 1

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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

CSS Susy画廊 - 中心最后一行与n-last-child

1 个答案: