Skip to main content
31 eventos
cuándo alternar formato qué por licencia comentario
el 8 abr. 2020 a las 0:00 auditar Publicaciones de baja calidad
el 10 abr. 2020 a las 13:43
el 21 mar. 2020 a las 8:22 auditar Publicaciones de baja calidad
el 21 mar. 2020 a las 8:22
el 11 mar. 2020 a las 16:46 comentario añadido Javi2EE 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/…
el 11 mar. 2020 a las 16:44 comentario añadido David E. Luna M. @Javi2EE, fue muy importante tu aclaración y la de phpMyGuel.
el 11 mar. 2020 a las 16:42 comentario añadido David E. Luna M. @phpMyGuel Si, eso estuve viendo. De hecho, la respuesta es útil. Lo de par o impar pensé que tenía que ver con el DOM, pero no. Tienes razón en ello. De hecho, la voy a votar como útil.
el 11 mar. 2020 a las 16:39 comentario añadido phpMyGuel @DavidE.LunaM. Parece que el OP le valió. Según entendí ese valor llega con el elemento y por lo que veo puede ser un valor numérico cualesquiera if(posicion%2 == 0) por eso supongo que lo divide entre 2 para saber si debe ir a la columna de la derecha o a la izquierda. En cualquier caso es lo que yo entendí y el OP no me lo desmintió XD. Y por lo que parece el blucle podría pintar de seguido varios elementos impares o varios pares, no contrapeados par-impar.
el 11 mar. 2020 a las 16:36 comentario añadido David E. Luna M. @phpMyGuel tienes razón en la parte que me has mencionado. Sin embargo, estoy leyendo bien la pregunta para entenderla mejor. Había entendido que el OP quería a la izquierda elementos pares y a la derecha elementos impares, de allí, la pseudoclase mencionada.
el 11 mar. 2020 a las 16:33 comentario añadido phpMyGuel No entiendo a donde quieres llegar. La pseudo-clase nth-child hace referencia a elementos respecto a su posición dentro del DOM. Si eres capaz de sacarle provecho en el caso que se expone, que creo que mi HTML replica, estoy encantado de aprender de tu respuesta ^^
el 11 mar. 2020 a las 16:29 comentario añadido Javi2EE @DavidE.LunaM. Pero esto de par e impar es por un valor que traen estos elementos de la lista, y ese valor determina en que columna debe mostrarse, en este caso puede haber 15 elementos en la izquierda y ninguno a la derecha. Haciéndolo como comentas siempre habría el mismo número de elementos en la izquierda y la derecha.
el 11 mar. 2020 a las 16:28 comentario añadido David E. Luna M. Voy a leer de nuevo a ver.
el 11 mar. 2020 a las 16:28 comentario añadido phpMyGuel @DavidE.LunaM. Creo que no estás entendiendo la problemática. Sustituye mi par e impar por un derecha e izquierda para entender de lo que te hablo. Donde los itemns izquierda deben ir a la primera columna y los derecha a la segunda.
el 11 mar. 2020 a las 16:26 comentario añadido David E. Luna M. @phpMyGuel, lo menciono por los comentarios que hacía la persona que preguntaba. Es decir, las reglas .par {} e .impar {} reemplazarla por .item:nth-of-type(2n) {} y .item:nth-of-type(2n+1) {}, ya que él quiere formar dos columnas, donde los pares van a la izquierda y los impares a la derecha.
el 11 mar. 2020 a las 16:22 comentario añadido phpMyGuel @DavidE.LunaM. Los de las clases .par e .impar es un requerimiento del OP. Este factor no lo marca su posición dentro del DOM, si no que cada item va a llegar con un valor (que puede ser par o impar) pudiendo darse el caso de que varios items pares vayan uno detrás del otro. (como puede verse en el HTML de mi respuesta).
el 11 mar. 2020 a las 16:19 comentario añadido David E. Luna M. @phpMyGuel De hecho, he estado pensando responder a la pregunta, pero considero que tu respuesta está completa. Solo tienes que colocarle el selector que te indiqué en el comentario anterior. Una vez lo hayas hecho eliminaré estos comentaros. Me reservo +1 a la espera de lo pruebes y luego lo edites.
el 11 mar. 2020 a las 16:17 comentario añadido David E. Luna M. @phpMyGuel, te tengo una propuesta para que tengas la respuesta completa. Independientemente de que utilices display:flex o display:grid a las reglas .item{} agrégale el selector :nth-of-type(2n) para indicar que seleccionas elementos pares y el resto a la derecha. Así solucionarías todo con independencia de que cambie de orden los elementos.
el 11 mar. 2020 a las 16:16 comentario añadido quevedo @Javi2EE Si en la nueva indicas en el título elementos de altura variable no habrá redundancia
el 11 mar. 2020 a las 16:10 comentario añadido David E. Luna M. Hola @Javi2EE, si hace la otra pregunta, hazla colocando un comentario señalando esta.
el 11 mar. 2020 a las 16:05 votar aceptar Javi2EE
el 11 mar. 2020 a las 16:05 comentario añadido Javi2EE 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
el 11 mar. 2020 a las 16:02 comentario añadido quevedo 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.
el 11 mar. 2020 a las 15:52 comentario añadido Javi2EE 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.
el 11 mar. 2020 a las 15:48 votar aceptar Javi2EE
el 11 mar. 2020 a las 15:52
el 11 mar. 2020 a las 15:44 comentario añadido Javi2EE 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.
el 11 mar. 2020 a las 15:28 votar aceptar Javi2EE
el 11 mar. 2020 a las 15:48
el 11 mar. 2020 a las 15:09 historial editado phpMyGuel CC BY-SA 4.0
se añadieron 38 caracteres en el cuerpo
el 11 mar. 2020 a las 15:04 historial recuperada phpMyGuel
el 11 mar. 2020 a las 15:04 historial editado phpMyGuel CC BY-SA 4.0
se añadieron 223 caracteres en el cuerpo
el 11 mar. 2020 a las 14:57 historial editado phpMyGuel CC BY-SA 4.0
se añadieron 223 caracteres en el cuerpo
el 11 mar. 2020 a las 14:10 historial eliminada phpMyGuel mediante Voto
el 11 mar. 2020 a las 14:09 historial editado phpMyGuel CC BY-SA 4.0
se añadieron 223 caracteres en el cuerpo
el 11 mar. 2020 a las 13:58 historial respuesta phpMyGuel CC BY-SA 4.0