Saltar al contenido
Closer Marketing

Entablar la misma altura en varios divs »loop

¿De qué manera hallar múltiples elementos con diferentes contenidos a exactamente la misma altura?

Este mini problema de estilo puede hacernos perder la paciencia y la eficacia por varias horas de trabajo. Y las probables resoluciones son fáciles, pero poco intuitivas.

Supongamos que disponemos la próxima situación:

Una sucesión de divs con más o menos el mismo contenido, pero la altura de uno es diferente de la altura del otro.

Probamos precisamente exactamente la misma línea de contenido, la misma altura de imagen e inclusive comandos CSS. altura máxima Ø Altura mínimaPero el procedimiento eficiente en una resolución al achicar el tamaño de la pantalla no es correspondiente en otra resolución. ¿realizar? !

Solución 1: Espectáculo Flex

Imaginemos que disponemos el próximo código:

La solución es tan simple como agregar Pantalla: maleable Al contenedor div:

De esta manera, independientemente de la altura de un div, el resto siempre y en todo momento se ajusta a la altura máxima:

Si deseamos hacer lo mismo con el ancho, debemos emplear Despacio: 1; En la división interior:

Solución 2: Ocultar el desbordamiento

No es tan muy elegante como el anterior, pero a la hora de ocultar un tanto el resto, vale la pena.

Ahora somos distintas, estamos ocultando algo mucho más allá Altura con otros elementos:

Solución 3: comportamiento de la mesa

CSS provoca que el div se vea como una tabla HTML antigua. ¿Cómo es?

Pantalla: fila de la tabla; Para el contenedor y Pantalla: celda de tabla; Para el div contenedor.

Hay muchas otras soluciones, como utilizar jquery para cambiar dinámicamente la altura o lo que sea relacionado con Posición: relativo Ø CompletamentePero la solución mucho más simple y útil es la solución previo.

¿Crees que deberíamos integrar otra solución esencial? ¡Háznoslo entender en los comentarios!

Si halla útil este artículo, ¡no olvide compartirlo!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *