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

Posted 2023-02-22

【中文标题】在每列css中设置不同的颜色？

【英文标题】：Set different color in every column css?

【发布时间】：2022-01-01 05:42:17

【问题描述】：

我在 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。我无法改变这一点。

【问题讨论】：

在 css 中使用 nth:child

列实际上并不存在于 CSS 列中（它们不是元素）。使用nth-child 为各个项目着色或尝试其他布局方法。

如何申请nth-child

【参考方案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>

【讨论】：

非常感谢..

【参考方案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>

【讨论】：

我应该使用什么布局。请给我建议。我可以在哪里添加odd 和even 功能？

使用display: flex或grid将很容易根据需要进行对齐@LaryJohn

我可以在给定的示例中添加flex 或grid。请在您的答案中添加它。非常感谢。

但是这里有一个问题。我正在从后端获取数据。这里它不是固定数据（16）。这里的 Item 可以是 20 或 25 或任何数字。那我怎么加呢。

@LaryJohn 你必须等待，因为有人可能并不总是在线。好吧，如果是这种情况（不知道固定数量），那么使用display: flex 并用一些标签将列分成几部分，而不是你最好使用odd/even，但是A Haworth 提供了一个很好的解决方案，适用于所有情况，但你必须知道宽度并相应地改变渐变