Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] DIVs internos con misma altura

Estas en el tema de DIVs internos con misma altura en el foro de CSS en Foros del Web. Existen un montón de lugares en internet que te dicen cómo lograr que 3 divs juntos , uno tras otro, tengan la misma altura. La ...
  #1 (permalink)  
Antiguo 12/11/2018, 13:35
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 1 mes
Puntos: 22
Pregunta DIVs internos con misma altura

Existen un montón de lugares en internet que te dicen cómo lograr que 3 divs juntos, uno tras otro, tengan la misma altura. La cosa es que yo necesito algo un poco más complejo.

En este JSfiddle verán mi caso. Como ven, tengo 3 divs juntos que ya tienen la misma altura. Y eso está muy bueno, pero lo que necesito ahora es que los H3 tengan la misma altura, para que todo se vea ordenado.

Con un min-height de 200px a los H3 arreglamos las cosas de una vez. El problema con esto es que si ponemos un títulos más largos, ese min-height a 200px ya no sirve de nada y todo se vuelve a descuadrar.

¿Alguna idea? ¿Es posible hacer esto sólo con CSS sin recurrir a jQuery?

Saludos!
  #2 (permalink)  
Antiguo 12/11/2018, 20:34
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: DIVs internos con misma altura

Empieza por quitarte de la cabeza esa mala practica de usar display table

Dado que es un sub elemento no puedes ajustar ese tamaño directo con CSS, tendrás que recurrir a javascript.
Por ejemplo con jQuery seria así
  #3 (permalink)  
Antiguo 12/11/2018, 22:37
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 1 mes
Puntos: 22
Respuesta: DIVs internos con misma altura

Cita:
Iniciado por ArturoGallegos Ver Mensaje
Empieza por quitarte de la cabeza esa mala practica de usar display table...
Gracias, ArturoGallegos!
¿Podrías explicar esto de que te cito? ¿Por qué es mala práctica?
  #4 (permalink)  
Antiguo 12/11/2018, 22:48
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: DIVs internos con misma altura

Bueno mas que una mala practica es un procedimiento obsoleto y yo personalmente lo veo como mala practica.

Usar display table lo que hace es emular una tabla html, que generalmente te obligara a utilizar código html adicional para emular la tabla en si., sumado a eso pierdes flexibilidad al crear tu diseño.

Te muestro este ejemplo rápido, fijate la cantidad de código empleado en cada uno para crear 2 filas de 3 columnas, asi como el resultado. (ignora la sección javascript, no se como ocultarla aquí)




Ahora imaginate cuando llega el momento del responsive? con flex solo cambias el ancho de la columna y listo pero con una tabla?
  #5 (permalink)  
Antiguo 14/11/2018, 13:37
Avatar de berkeleyPunk  
Fecha de Ingreso: febrero-2013
Ubicación: México :C
Mensajes: 565
Antigüedad: 11 años, 1 mes
Puntos: 22
De acuerdo Respuesta: DIVs internos con misma altura

Excelente! Muchas gracias por todo! Saludos!

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:15.