0
194
Vistas¿Establecer un color diferente en cada columna css?
Me enfrento a un problema en la propiedad css de recuento de columnas. Aquí tengo una lista como esta--
<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>Tengo que hacer esto como imagen--
Puedo agregar 4 columnas siguiendo css
.list { column-count: 4 } Pero, ¿cómo puedo dar este red y white uno después del otro? No puedo entender esto.
Nota: tengo que crear ul, li . No puedo cambiar esto.
2 Respuestas
Responde la pregunta0
Es mejor usar un método de diseño diferente en lugar del column-count: 4 porque no puede usar la funcionalidad even odd aquí y tiene que definir el valor del color para la columna individual creada usando 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> Un enfoque simple para 4 columnas, pero también puede ver la propiedad 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>0
Como no sabe cuál podría ser el contenido de los diversos elementos li (pueden ocupar alturas muy diferentes), no puede saber de antemano qué elemento li estará en qué columna.
Por lo tanto, no es seguro usar nth-child salvo en las circunstancias más simples (cada li ocupa el mismo espacio).
Un método diferente es establecer una imagen de fondo en el elemento ul que tenga 'franjas' rojas y blancas, cada una de las cuales ocupa el 25% del ancho. La coloración responde así.
.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>