Nastavit různé barvy v každém sloupci css?

Question 1

Jsem čelí jeden problém v sloupec-počet css vlastnost. Tady mám seznam jako tohle ...

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

Musím to udělat jako obrázek--

Můžu přidat 4 sloupec podle následující css

.list {
   column-count: 4
}

Ale Jak můžu dát tohle red a white barva po sobě. Nemůžu pochopit.

Poznámka: mám vytvořit ul, li. Nemůžu změnit to.

Question 2

Jako nevíš, co obsah jednotlivých li prvky by mohly být - mohou mít velmi rozdílné výšky - nemůžete říci předem, které li prvek bude ve kterém sloupci.

Není proto bezpečné použití nth-child jinak než za nejvíce zjednodušující okolností (každých li zabírají stejný prostor).

Jiný způsob je nastavit obrázek na pozadí na ul prvek, který má pruhy červené a bílé, která jde napříč přičemž každý 25% šířky. Zbarvení je tak citlivý.

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

Question 3

Je lepší použít jinou metodu rozvržení místo column-count: 4 protože nemůžete použít odd even funkčnost zde a definovat color hodnoty pro jednotlivé sloupce vytvořené pomocí nth:child

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

Jednoduchý přístup do 4 sloupců, ale můžete se podívat do display: flex nemovitosti.

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

A Haworth · Answer 1 · 2021-11-22T16:56:15

Jako nevíš, co obsah jednotlivých li prvky by mohly být - mohou mít velmi rozdílné výšky - nemůžete říci předem, které li prvek bude ve kterém sloupci.

Není proto bezpečné použití nth-child jinak než za nejvíce zjednodušující okolností (každých li zabírají stejný prostor).

Jiný způsob je nastavit obrázek na pozadí na ul prvek, který má pruhy červené a bílé, která jde napříč přičemž každý 25% šířky. Zbarvení je tak citlivý.

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

Rana · Answer 2 · 2021-11-22T17:04:25

Je lepší použít jinou metodu rozvržení místo column-count: 4 protože nemůžete použít odd even funkčnost zde a definovat color hodnoty pro jednotlivé sloupce vytvořené pomocí nth:child

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

Jednoduchý přístup do 4 sloupců, ale můžete se podívat do display: flex nemovitosti.

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

To, co layout bych měl použít. Prosím, navrhnout mi. Kde se můžu přidat odd a even funkčnost?
Pomocí display: flex nebo grid bude to snadné pro vyrovnání účel podle potřeby @LaryJohn
Mohu přidat flex nebo grid na můj uvedený příklad. Prosím, Přidejte se, že také ve své odpovědi. Děkuji moc.
Ale je tu jeden problém. Dostávám data z backend. Tady to není pevná data(16). Zde Položka může být 20, 25 nebo libovolný počet. Pak, Jak mohu přidat.
@LaryJohn musíte počkat, stejně jako někdo nemusí být vždy on-line. No pokud je to tento případ (není pevnou částku známo), než používat display: flex a rozdělit sloupce v části s některými tag a než ty dobré použít odd/even ale Haworth za předpokladu dobré řešení použitelné ve všech případech, ale u musí vědět, šířku a změnit odpovídajícím způsobem v přechodu

Nastavit různé barvy v každém sloupci css?

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii