在每列css中设置不同的颜色？

Question

我在 column-count css 属性中遇到了一个问题。这里我有一个这样的列表--

<ul class="list">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
  <li>eleven</li>
  <li>twelve</li>
  <li>thirteen</li>
  <li>fourteen</li>
  <li>fifteen</li>
  <li>sixteen</li>
</Ul>

我必须像图片一样这样做--

我可以通过以下 css 添加 4 列

.list {
   column-count: 4
}

但是我怎样才能给这个red和white一个接一个的颜色。这个我看不懂。

注意：我必须创建ul, li。我无法改变这一点。

Answer 1

由于您不知道各种 li 元素的内容可能是什么 - 它们可能占据非常不同的高度 - 您无法提前知道哪个 li 元素将在哪一列中。

因此，除了在最简单的情况下（每个 li 占用相同的空间）之外，使用 nth-child 是不安全的。

另一种方法是在 ul 元素上设置背景图像，其中红色和白色的“条纹”各占 25% 的宽度。因此，着色具有响应性。

.list {
  column-count: 4;
  background-image: linear-gradient(to right, white 0 25%, red 25% 50%, white 50% 75%, red 75% 100%);
}

<ul class="list">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
  <li>eleven</li>
  <li>twelve</li>
  <li>thirteen</li>
  <li>fourteen</li>
  <li>fifteen</li>
  <li>sixteen</li>
</Ul>

Answer 2

最好使用不同的布局方法而不是 column-count: 4，因为您不能在此处使用 odd even 功能，并且必须为使用 nth:child 创建的单个列定义 color 值

.list {
  column-count: 4;
}

.list :nth-child(n+5) {
  background: #FF0705;
}

.list :nth-child(n+9) {
  background: blue;
}

.list :nth-child(n+13) {
  background: green;
}

<ul class="list">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
  <li>eleven</li>
  <li>twelve</li>
  <li>thirteen</li>
  <li>fourteen</li>
  <li>fifteen</li>
  <li>sixteen</li>
</ul>

4 列的简单方法，但您也可以查看 display: flex 属性。

#list {
  display: flex;
}

div span {
  display: block;
}

div:nth-child(even) {
  background: #FF0705;
}

<div id="list">
  <div>
    <span>one</span>
    <span>two</span>
    <span>three</span>
    <span>four</span>
  </div>
  <div>
    <span>five</span>
    <span>six</span>
    <span>seven</span>
    <span>eight</span>
  </div>
  <div>
    <span>nine</span>
    <span>ten</span>
    <span>eleven</span>
    <span>twelve</span>
  </div>
  <div>
    <span>thirteen</span>
    <span>fourteen</span>
    <span>fifteen</span>
    <span>sixteen</span>
  </div>
</div>