Algunas veces nos topamos con el problema de que tenemos que igualar el tama?o de varias columnas que contienen diferente contenido, esto resulta f?cil si el contenido es est?tico, bastar?a con aplicarles un poco de CSS a las columnas y problema resuelto. Pero el problema viene cuando el contenido no es est?tico, sino, que es generado ya sea de la DB o alg?n otro recurso, debemos tener un mecanismo que establezca el mismo tama?o para todas las columnas sin importar el contenido de cada una.
Aqu? hay una soluci?n para este problema, algo sencillo, solo un poco de JavaScript (mediante jQuery claro).
Bastar?a con esto:
Un poco de CSS para diferenciar las columnas:
#container { width:700px; margin:0 auto; } #container div { border:1px solid #ccc; width:316px; margin-right: 15px; float:left; background-color:#ddd; }
Y el JavaScript:
$(function(){ var maxH = 0; $("#container div").each(function(i) { var actH = $(this).height(); if(actH > maxH) maxH = actH; }); $("#container div").height(maxH); });