Cuantas veces nos complicamos con nuestras hojas de estilo con algo tan simple como igualar el alto de distintas columnas, algo que parece muy simple en la practica se torna complicado y más si tenemos en cuenta el problema de compatibilidad entre los distintos navegadores.
Para igualar el alto de distintas columnas de manera sencilla podemos utilizar jQuery, en especial tenemos disponible jQuery Equal Columns, un plugin que no tiene más de 15 lineas de código que iguala el alto de las columnas tomando de referencia la columnas de mayor alto.
El plugin es el siguiente:
jQuery.fn.equalCols = function(){ //Array Sorter var sortNumber = function(a,b){return b - a;}; var heights = []; //Push each height into an array $(this).each(function(){ heights.push($(this).height()); }); heights.sort(sortNumber); var maxHeight = heights[0]; return this.each(function(){ //Set each column to the max height $(this).css({'height': maxHeight}); }); };
Y su implementación es igual de sencilla:
jQuery(function($){ $('#col1,#col2,#col3').equalCols(); });
En donde #col1,#col2,#col3 son los identificadores de las columnas.
Simple verdad?
Web y código del plugin: jQuery Equal Columns
Fliberty
13 años ago
No se si habrás probado en igualar columnas cuando en una de ellas utilizas un formulario donde en mi caso cargo imagenes utilizando el script iconifier, lo cual abre un campo en lista que hacer el div se expanda, sin embargo, el script para igualar columnas no toma la nueva medida de la columna que acaba de variar y se mantiene, por lo que el contenido de la columna que acaba de variar se sale fuera del marco.