Estoy tratando de modificar un componente existente dentro de una aplicación, la idea es que se recorre una única lista de elementos, estos elementos tienen un campo posición, cuando la posición es impar el elemento debe aparecer a la izquierda y cuando es par a la derecha. Lo explico con un trozo de código lo mas simple posible para que se entienda fácil.
<div class="container">
while(!lista.isEmpty()){
<div class="c-box if(posicion%2 == 0){'c-right'}else{'c-left'}">{{item}}</div>
}
</div>
El problema es que no siempre hay los mismos elementos en ambas columnas por lo que la solución mas obvia que sería:
.container{
}
.c-box{
width:50%;
display:inline-block;
}
.c-left{
float:left;
}
.c-right{
float:right;
}
<div class="container">
<div class="c-box c-left">1-Left</div>
<div class="c-box c-right">2-Right</div>
<div class="c-box c-left">3-Left</div>
<div class="c-box c-right">4-Right</div>
<div class="c-box c-right">5-Right</div>
<div class="c-box c-left">6-Left</div>
<div class="c-box c-left">7-Left</div>
<div class="c-box c-left">8-Left</div>
<div class="c-box c-left">9-Left</div>
<div class="c-box c-left">10-Left</div>
<div class="c-box c-left">11-Left</div>
<div class="c-box c-left">12-Left</div>
<div class="c-box c-left">13-Left</div>
<div class="c-box c-left">14-Left</div>
<div class="c-box c-right">15-Right</div>
</div>
No funciona ya que cuando se encadenan varios elementos impares los va poniendo uno al lado del otro debido al float
.
Otra solución que he probado es la de asignar un margen lateral para forzar la posición a izquierda y derecha pero en este caso queda un gap a izquierda o derecha de cada uno de los campos:
.container{
}
.c-box{
width:50%;
display:inline-block;
}
.c-left{
float:left;
margin-right:50%;
}
.c-right{
float:right;
margin-left:50%;
}
<div class="container">
<div class="c-box c-left">1-Left</div>
<div class="c-box c-right">2-Right</div>
<div class="c-box c-left">3-Left</div>
<div class="c-box c-right">4-Right</div>
<div class="c-box c-right">5-Right</div>
<div class="c-box c-left">6-Left</div>
<div class="c-box c-left">7-Left</div>
<div class="c-box c-left">8-Left</div>
<div class="c-box c-left">9-Left</div>
<div class="c-box c-left">10-Left</div>
<div class="c-box c-left">11-Left</div>
<div class="c-box c-left">12-Left</div>
<div class="c-box c-left">13-Left</div>
<div class="c-box c-left">14-Left</div>
<div class="c-box c-right">15-Right</div>
</div>
Esta solución queda como se muestra en esta imagen:
Sé que utilizando 2 divs
con dos columnas y recorriendo la lista dos veces este problema estaría solucionado pero no me es posible aplicar esa solución en este caso, la lista debe de recorrerse tal como aparece en el primer código, si que tengo la posibilidad de usar flex-box
o cualquier solución CSS
pero he realizado multitud de intentos sin ningún resultado.
UPDATE: Hay un problema con la solución con grid cuando la aplico al caso real, que viene de que no he sabido explicar bien el problema, olvidé especificar que la altura de estos items puede ser variable ya que algunos de ellos despliegan otros campos en función de su valor, como se ve en la siguiente imagen.
Esto hace que cuando un campo de la izquierda despliega otros campos se desplace todas las columnas de la derecha y se genere un gap vacío en la columna opuesta.
Gracias de antemano, espero que me puedan ayudar.
grid
? ¿O como mucho solamenteflex-box
?