2

次のマークアップがあるとしましょう。

<ul class="mycolumns">
    <li>Text</li>
    <li>Text</li>
    <li>Text</li>
    ...
    <li>Text</li>
    <li>Text</li>
</ul>

そして、次のCSS（プレフィックスを想定）：

.mycolumns {
    column-count: 3;
    column-gap: 10px;
}

奇数列を「ゼブラストライプ」するにはどうすればよいですか？これが私が正しいと思ったもののフィドルです（CSSにSCSSを使用していることに注意してください）

4

1 に答える 1

1

CSS でできない場合は、jQuery がいつでも役に立ちます。

jQuery Columnizer Pluginを使用して同じタスクを実行できますが、実際の要素で列をラップするため、CSS を介して個々の列をターゲットにすることができます。

.column:nth-child(odd) {
  background-color: rgb(255, 200, 200);
}
于 2012-08-10T03:55:25.560 に答える