jQuery plugin: SameHeightElements

Hace un par de días tuve que hacer unos cambios en una web. Tenía que hacer que todos los elementos de una fila tuvieran el mismo alto, independientemente del contenido (en la imagen que hay más adelante se ve entiende mejor). La opción normalmente es usar display: table-cell; ó display: flex;, pero el resultado no siempre es el mejor y la compatibilidad con los navegadores tampoco. Así que hice un pequeño plugin para jQuery, lo apliqué en la web y después de ver que funciona bastante bien lo publiqué en Github.

Para ver cómo funciona, podéis ver un ejemplo en JSFiddle

Ejemplo del problema

La solución

Primero, descargar la última versión desde Github e incluirlo, después ya se puede usar.

$(".row .item").sameHeightElements();

Y si fuera necesario, se puede deshabilitar a partir de un determinado ancho de ventana:

$(".row .item").sameHeightElements({
    minWindowWidth: 479
});

Tras aplicar el plugin SameHeightElements


Descargar | Demo




Josep Viciana

Programador de 29 años con una década de experiencia como programador. interesado en el diseño, ilustración y nuevas tecnologías. Dedicado desde siempre a la programación Web y desde hace algunos años también a la móvil.

No hay comentarios


Puedes dejar el primero : )



Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Conoce cómo se procesan los datos de tus comentarios.