Joan Ballester

Como hicimos en la anterior entrada (Geolocalización mediante el Api de Google Maps), vamos a seguir subiendo algunos ejemplos, snipets o pruebas que tenemos en local y que pueden servir a alguien.

Este es rapidito y fácil, pero muchas veces cuando maquetas algo con columnas tienes el problemilla de los fondos… que no sabes el contenido que meterán en cada una de las columnas y resulta complicado que queden de la misma altura… pues bien, como de momento CSS3 está un poco lejano en este aspecto (algunos navegadores nos traerán problemas con ello), con un rápido jquery lo solucionamos, bueno bonito barato, aquí tenéis, tiene poco secreto pero es útil, os dejo el código:

$(document).ready(function() {
    var altMax = 0;
    ajustarAlturas(altMax, '.contenedor div');
});
function ajustarAlturas(altMax, elemento) {
    $(elemento).each(function(i) {
        var xL = $(this).height();
        if (xL > altMax) {
            altMax = xL;
        }
    });
    $(elemento).css('height', altMax);
}

HTML y CSS simplemente para resaltar las columnas y ver que está correcto:

<div class="contenedor">
    <div class="ajustable">lorem ipsum lorem lorem</div>
    <div class="ajustable">lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem</div>
    <div class="ajustable">lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem lorem ipsum lorem lorem</div>
</div>

.contenedor{
    position:relative;
    overflow:hidden;
    border:1px solid #DDD;
    background-color:#EFEFEF;
}
.ajustable{
    position:Relative;
    float:left;
    padding:1%;
    margin:1%;
    width:29.3%;
    background-color:#FAFAFA;
    font-size:13px;
}

Podéis ver el ejemplo funcionando aquí.

Un saludo, espero que vayamos subiendo más experimientos :-)