2

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

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.

problema

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.

4
  • ¿Podrías usar grid? ¿O como mucho solamente flex-box?
    – phpMyGuel
    Commented el 11 mar. 2020 a las 14:27
  • En principio podría user grid también, no habría problema
    – Javi2EE
    Commented el 11 mar. 2020 a las 14:29
  • 1
    ¿Podrias añadir a la pregunta el código html generado por el servidor? Es decir el que ves tu desde el navegador sin el bucle.
    – x3k
    Commented el 11 mar. 2020 a las 14:31
  • Por supuesto, ahí lo añado, lo he limpiado un poco para que se vea mejor, estos divs llevan contenido en el resultado real.
    – Javi2EE
    Commented el 11 mar. 2020 a las 14:35

1 respuesta 1

5

El sistema de grid es muy potente y te permite hacer cosas "muy locas" si te pones a pelearte un rato con él:

  • A través de grid-template-columns establecí que los items se posicionaran simulando dos columnas.

  • Con grid-column-start establecí que las columnas pares se colocaran en la segunda columna y los impares en la primera.

Esto ocasionaba que quedasen huecos cuando coincidían dos columnas con la misma alineación seguidas. Así que con grid-auto-flow delegué la tarea de eliminar estos huecos al algoritmo mágico de colocación de grid que muy educadamente eliminó los huecos dejados.

.contenedor {
  display: grid;
  width: 100%;
  grid-gap: 10px 10px;
  grid-template-columns: 45% 45%;
  grid-auto-flow: column;
}

.item {
  width: 100%;
  border: 2px solid red;
}

.par {
 grid-column-start: 2;
}

.impar {
  grid-column-start: 1
}
<div class="contenedor">
  <div class="item par">
    <p>Par</p>
  </div>
  <div class="item impar">
    <p>Impar</p>
  </div>
  <div class="item par">
    <p>Par</p>
  </div>
  <div class="item impar">
    <p>Impar</p>
  </div>
  <div class="item par">
    <p>Par</p>
  </div>
  <div class="item par">
    <p>Par</p>
  </div>
  <div class="item par">
    <p>Par</p>
  </div>
  <div class="item impar">
    <p>Impar</p>
  </div>
</div>

19
  • He aceptado esta solución porque en realidad responde perfectamente a la pregunta pero hay un problema con esta solución cuando la aplico al caso real, que viene de que no he sabido explicar bien el problema, se me olvidó decir que la altura de estos items puede ser variable ya que algunos de ellos despliegan otros campos en función de su valor. Amplío la pregunta añadiendo una imagen para que se entienda lo que digo.
    – Javi2EE
    Commented el 11 mar. 2020 a las 15:44
  • Te pido disculpas por desaceptar esta respuesta de momento, lo hago para que mas gente pueda aportar, aunque en realidad respondía perfectamente a la pregunta inicial.
    – Javi2EE
    Commented el 11 mar. 2020 a las 15:52
  • Hola @Javi2EE si la respuesta responde a la pregunta inicial debieras dejarla como aceptada; eso ayudará a otros, y formular una nueva expresando en ella que la altura de las celdas debe ser variable.
    – quevedo
    Commented el 11 mar. 2020 a las 16:02
  • Vale así lo haré si es lo correcto, era por evitar tener dos preguntas que van a ser prácticamente iguales y con casi el mismo titulo
    – Javi2EE
    Commented el 11 mar. 2020 a las 16:05
  • 1
    Dejo aquí el enlace a la nueva pregunta por si alguien se anima con alguna solución, espero que no quede muy repetitiva la cuestión: es.stackoverflow.com/questions/336312/…
    – Javi2EE
    Commented el 11 mar. 2020 a las 16:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.