Igualar columnas css con jQuery

Escrito por: Martín el 31-12-2008 08:19:48 y leído 1168 veces

Cuando maquetábamos webs con tablas (sí... soy culpable, yo también usé tablas), era muy fácil igualar el alto de columnas (no en contenido, sino en altura total de la caja).

Ahora, con los CSS, se hace un poco más complicado, porque claro, intentaremos dejar eso de las tablas para eso de los datos tabulares, por lo que no podremos valernos de esa ayudita...

Entonces, y aunque una solución -casera- puede ser usar un div contenedor y dentro cada div de las columnas, jQuery no deja de sorprendernos con otra maravillosa solución (esta solución no vale para divs con fondos)

Consiste en decirle mediante un class, que columnas debe igualar y el script se ocupa de hacerlo.

Obviamente, necesitaremos incluir la librería jQuery, pero a esta altura, creo yo, ya la habremos usado para algo en nuestra web.

La aplicación de esta solución es muy fácil, solo hace falta aplicar la función (ver código 1) y luego, marcar cada div con un class (ver código 2).

Fuente: cssnewbie (inglés).

Código JAVASCRIPT

function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".column"));
})

Código CSS

class="column"

Categorías: Igualar Columnas • Css • Jquery • •

Artículos relacionados:

• 20 plugins para jQuery que no pueden faltar en tus webs
• Excelente listado de 240 plugins para jquery
• Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
• jQuery Validate: la rápida validación de formularios.
• Formularios web con jQuery Validate y envío por phpmailer y gmail
• Calendario en PHP con eventos, jQuery y vTip
• 18 plugins jquery que no pueden faltar en tu web parte 2

100 Búsquedas de este artículo:

igualar div jquery • igualar columnas jquery • jquery columnas • columnas jquery • igualar altura divs jquery • jquery igualar columnas • igualar columnas • igualar columnas css • columnas equilibradas css • css igualar altura • igualar alturas jquery • igualar altura div jquery • igualar alto css • igualar jquery • igualar alto div jquery • igualar columnas con jquery • igualar height jquery • jquery columnas cambiantes • columnas equilibradas o de igual alto jquery • css cómo igualar altura cajas • igualar divs jquery • bloques jquery • igualar altura de divs • igualar columnas divs • jquery igualar divs • jquery ajax igualar div columnas • ancho columnas con jquery • jquery igualar height • todas las columnas iguales jquery • gualar anchos con jquery • jquery igualar altura divs • igualar altura divs • igualar alto de columnas jquery • igualar altura jquery • jquery igualar altura columnas • igualar height to div jquery • como igualar columnas en • igualar alturas con jquery • columnas css html • columnas con jquery • como puedo igualar las columnas laterales de mi blog? • columna jquery • jquery igualar altura div • css igualar altura de 2 columnas • jquery ancho de columnas • javascript columnas iguales • igualar alto columnas div • redimensionar columnas tabla html • tablas con celdas y columnas con jquery • igualar altura css3 • css jquery igualar tamaño cajas • jquery equilibrar columnas • jquery dos columnas con el mismo alto • jquery igualar altura de las columnas • contar columnas css3 jquery • igualar altura div com jquery • igualar dos alturas jquery • columnas alto ajustable css • igualar alturas columnas • alto de div automatico js • div igualar alto • alturas iguales jquery • igualar el ancho de columnas de dos tablas html • igualar div con jqery • igualar alto de coluymnas con jquery • css sidebar que ocupa alto total • jquery igualar altura • divs equilibrados con css • estirar columna alto contenedor css • alto de un contenedor jquery • Como igualar columnas • igualar div en altura • div columnas equilibradas • css igualar altura de columnas • alto columna automatico web • igualar alto de div • jquery igualar altos lista • igualar altos de columnas con jquery • columnas css div • como igualar la altura de dos tablas html • igualar columnas con css • mismo ancho celdas css • tabla con muchas columnas jquery • tabla con columnas ajustables jquery • capas css equilibradas • igualar divs con jquery • igualar celdas dentro del css • igualar celdas dentro de un div • simplegrid jquery columna en 2 renglones • igualar altura de columas css3 • divs iguales jquery • igualar altura divs css • igualar alto capas jquery • jquery columnas tabla • css tabla ancho de columnas • html igualar anchos de columnas de tablas • igualar ancho div html css • cambiar ancho de columna jquery • css igualar altura dos columnas • en que consiste equilibrar columnas •