Normalmente cuando tenía que alinear dos cajas horizontalmente hacía lo que todos: display inline-bock y con widths de un 47%… Pero existe una manera mejor para tener resultados mucho mejores.

Esto es lo que yo hacía hasta ahora:

Lorem ipsum dolor sit amet…
Quisque ac urna vel metus…
.box {
    display: inline-bock;
    width: 47%;
}
.box.left {
    margin-right: 4%;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor arcu, molestie eget sapien ac, molestie posuere mi. Curabitur pretium viverra elit. Pellentesque interdum est nec hendrerit auctor. Donec sit amet volutpat augue, in posuere turpis. Vivamus fringilla arcu id metus finibus porta. Phasellus odio justo, viverra a commodo sed, malesuada quis tortor. Phasellus ornare gravida feugiat. Mauris nunc tortor, euismod eu convallis ut, suscipit congue augue.
Quisque ac urna vel metus iaculis mattis vitae sit amet magna. Integer dolor elit, accumsan et ante sed, maximus tincidunt nulla. Vivamus posuere velit varius gravida rhoncus. Phasellus imperdiet eros quis iaculis sagittis. Phasellus posuere ultrices nisi, id gravida mauris dictum non. Donec eros elit, sagittis vitae mauris non, malesuada volutpat eros.

Cómo pedemos apreciar el problema de este método es que no llena el ancho del contenedor, por la derecha nos falta un poco para llegar y eso no spuede hacer descuadrar el diseño y la alineación de las cajas. Pero lo podemos arreglar, con la misma maquetación usaremos un float:right:

.box {
    display: inline-bock;
    width: 47%;
}
.box.right {
    float:right;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor arcu, molestie eget sapien ac, molestie posuere mi. Curabitur pretium viverra elit. Pellentesque interdum est nec hendrerit auctor. Donec sit amet volutpat augue, in posuere turpis. Vivamus fringilla arcu id metus finibus porta. Phasellus odio justo, viverra a commodo sed, malesuada quis tortor. Phasellus ornare gravida feugiat. Mauris nunc tortor, euismod eu convallis ut, suscipit congue augue.
Quisque ac urna vel metus iaculis mattis vitae sit amet magna. Integer dolor elit, accumsan et ante sed, maximus tincidunt nulla. Vivamus posuere velit varius gravida rhoncus. Phasellus imperdiet eros quis iaculis sagittis. Phasellus posuere ultrices nisi, id gravida mauris dictum non. Donec eros elit, sagittis vitae mauris non, malesuada volutpat eros.

Ahora lo que querríamos es que tuviesen el mismo alto aunque el contenido sea diferente. Visualmente quizá necesitamos que sean iguales. Para ello deberemos cambiar ligeramente la maquetació y añadiremos un <div> interno para medir las cajas:

Lorem ipsum dolor sit amet…
Quisque ac urna vel metus…
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor arcu, molestie eget sapien ac, molestie posuere mi. Curabitur pretium viverra elit. Pellentesque interdum est nec hendrerit auctor. Donec sit amet volutpat augue, in posuere turpis. Vivamus fringilla arcu id metus finibus porta. Phasellus odio justo, viverra a commodo sed, malesuada quis tortor. Phasellus ornare gravida feugiat. Mauris nunc tortor, euismod eu convallis ut, suscipit congue augue.
Quisque ac urna vel metus iaculis mattis vitae sit amet magna. Integer dolor elit, accumsan et ante sed, maximus tincidunt nulla. Vivamus posuere velit varius gravida rhoncus. Phasellus imperdiet eros quis iaculis sagittis. Phasellus posuere ultrices nisi, id gravida mauris dictum non. Donec eros elit, sagittis vitae mauris non, malesuada volutpat eros.

Para igualar las cajas usaremos javascript (mejor dicho jQuery) y crearemos una función que se llame por ejemplo: resize_boxes().

function resize_boxes(){
    var $box_containers = $('.box-container');
 
    $box_containers.each(function() {
        var $box_container = $(this),
            $boxes = $box_container.find('.box'),
            max_height = 0;
 
        $boxes.each(function() {
            var $box = $(this),
                $inner = $box.find('.box-inner'),
                the_height = $inner.outerHeight();
 
            if(the_height&gt;max_height) max_height = the_height;
        });
 
        $boxes.each(function() {
            var $box = $(this);
 
            $box.css('min-height', max_height);
        });
    });
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor arcu, molestie eget sapien ac, molestie posuere mi. Curabitur pretium viverra elit. Pellentesque interdum est nec hendrerit auctor. Donec sit amet volutpat augue, in posuere turpis. Vivamus fringilla arcu id metus finibus porta. Phasellus odio justo, viverra a commodo sed, malesuada quis tortor. Phasellus ornare gravida feugiat. Mauris nunc tortor, euismod eu convallis ut, suscipit congue augue.
Quisque ac urna vel metus iaculis mattis vitae sit amet magna. Integer dolor elit, accumsan et ante sed, maximus tincidunt nulla. Vivamus posuere velit varius gravida rhoncus. Phasellus imperdiet eros quis iaculis sagittis. Phasellus posuere ultrices nisi, id gravida mauris dictum non. Donec eros elit, sagittis vitae mauris non, malesuada volutpat eros.

Podemos apreciar que el contenedor interior (la línea de puntos) sigue intacto pero las cajas siguen bien alineadas de altura. Muestro un ejemplo bonito de las cajas:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor arcu, molestie eget sapien ac, molestie posuere mi. Curabitur pretium viverra elit. Pellentesque interdum est nec hendrerit auctor. Donec sit amet volutpat augue, in posuere turpis. Vivamus fringilla arcu id metus finibus porta. Phasellus odio justo, viverra a commodo sed, malesuada quis tortor. Phasellus ornare gravida feugiat. Mauris nunc tortor, euismod eu convallis ut, suscipit congue augue.
Quisque ac urna vel metus iaculis mattis vitae sit amet magna. Integer dolor elit, accumsan et ante sed, maximus tincidunt nulla. Vivamus posuere velit varius gravida rhoncus. Phasellus imperdiet eros quis iaculis sagittis. Phasellus posuere ultrices nisi, id gravida mauris dictum non. Donec eros elit, sagittis vitae mauris non, malesuada volutpat eros.

Esta función la deberemos llamar al cargar el documento, así:

$(document).ready(function() {
    resize_boxes();
});

Pero el problema es que sólo lo hace al cargar la página, si hacemos cambiamos el tamaño de la ventana vemos que no sirve, mantiene el valor que se ha calculado inicialmente. para solucionar el problema deberemos incluir o bien la función en una función que tengamos al hacer resize o lo llamaremos en elcon el onReszie:

 

De esta manera cada vez que reescalemos la ventana del navegador calculará el valor. Ahora sólo nos queda hacerlo responsive, tenemos que hacer saltar las cajas en un cierto media query que dependerá del tamaño del contenedor. En este caso nuestro contenedor mide 900px por lo tanto empieza a verse mal a partir de 700px más o menos podríamos apurar un poco más en este caso ya que sólo tenemos texto en el interior. Así que haremos:

@media(max-width:700px){
    .box {
        display:block;
        width:100%;
        float:none !important;
        margin: 0 0 2em;
        min-height:0 !important;
    }
}

En este caso forzamos que el min-height sea 0 ya que al no estar una al lado de la otra no tiene sentido que midan lo mismo de alto:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor arcu, molestie eget sapien ac, molestie posuere mi. Curabitur pretium viverra elit. Pellentesque interdum est nec hendrerit auctor. Donec sit amet volutpat augue, in posuere turpis. Vivamus fringilla arcu id metus finibus porta. Phasellus odio justo, viverra a commodo sed, malesuada quis tortor. Phasellus ornare gravida feugiat. Mauris nunc tortor, euismod eu convallis ut, suscipit congue augue.
Quisque ac urna vel metus iaculis mattis vitae sit amet magna. Integer dolor elit, accumsan et ante sed, maximus tincidunt nulla. Vivamus posuere velit varius gravida rhoncus. Phasellus imperdiet eros quis iaculis sagittis. Phasellus posuere ultrices nisi, id gravida mauris dictum non. Donec eros elit, sagittis vitae mauris non, malesuada volutpat eros.

¡Espero que lo utilicéis tanto cómo yo!

Categorías: CSS, JavaScript
Etiquetas:, , , ,
Si necesitas una url corta puede usar: codygo.es/1985

1 comentario

  1. hector dice:

    este tutorial es muy bueno saludos cuate

Deja un comentario