Divs Flotantes CSS A Alturas Variables [duplicar]

En el supuesto de que sus necesidades son más como su código de ejemplo de color entonces:

.box:nth-child(odd){
    clear:both;
}

Si va a ser 3 filas entonces nth-child(3n+1)

Estoy proporcionando esta respuesta porque incluso cuando hay buenos que proporcionan una solución( usando Masonería) todavía no está claro por qué no es posible lograr esto mediante el uso de flotadores.

(esto es importante - #1).

Un elemento flotante se moverá tan lejos a la izquierda o a la derecha como pueda en la posición donde estaba originalmente

Así que ponlo de esta manera:

Tenemos 2 div

<div class="div5">div5</div>
<div class="div6">div6</div>

.div-blue{
    width:100px;
    height:100px;
    background: blue;
}

.div-red{
    width:50px;
    height:50px;
    background: red;
}

Sin float estarán uno debajo del otro

Si nos float: right el div5, el div6 se coloca en la línea div5 fue ,

/*the lines are just for illustrate*/

Así que si ahora float: left el div6 se moverá tan lejos a la izquierda como pueda, " en esta línea" (ver #1 arriba), así que si div5 cambia su línea, div6 la seguirá.

Ahora vamos a añadir otro div en la ecuación

<div class="div4">div4</div>
<div class="div5">div5</div>
<div class="div6">div6</div>

.div-gree{
    width:150px;
    height:150px;
    background: green;

    float:right;
}

Tenemos esto

Si ponemos clear: right a div5, lo estamos forzando a tomar la línea a continuación div4

Y div6 flotarán en esta nueva línea ya sea a la derecha o a la izquierda.

Ahora vamos a usar como ejemplo la pregunta que me trajo aquí debido a un duplicado Forzando la pila div de izquierda a derecha

Aquí el fragmento para probarlo:

div{
    width:24%;
    margin-right: 1%;
    float: left;
    margin-top:5px;
    color: #fff;
    font-size: 24px;
    text-align: center;
}

.one{
    background-color:red;
    height: 50px;
}

.two{
    background-color:green;
    height:40px;
}

.three{
    background-color:orange;
    height:55px;
}

.four{
    background-color:magenta;
    height:25px;
}

.five{
    background-color:black;
    height:55px;
}

<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>

<div class="one">1*</div>
<div class="three">2*</div>
<div class="four">3*</div>
<div class="two">4*</div>
<div class="five">5*</div>

En el en la imagen de arriba se puede ver cómo div.5 se almacena justo al lado de div.3 que es porque en su línea (definida por el cuadro de línea de div.4) que es lo más lejos que puede ir, div.1*, div.2*, etc, también flotan a la izquierda de div.5 pero como no encajan en esa línea van a la línea de abajo (definida por el cuadro de línea de div.5)

Ahora observe que cuando reducimos la altura de div.2* lo suficiente como para ser menor que div.4* cómo dejó pasar a div.5*:

Espero que esto ayude a aclarar por qué esto no se puede lograr usando flotadores. Solo aclaro el uso de flotadores (no de bloques en línea) debido al título "CSS Floating Divs At Variable Heights" y porque en este momento la respuesta es bastante larga.

Como se ha señalado con razón, esto es imposible solo con CSS... afortunadamente, ahora he encontrado una solución en http://isotope.metafizzy.co/

Parece resolver el problema completamente.

Con un poco de ayuda de este comentario ( CSS Block float left) descubrí la respuesta.

En cada "fila" que hago, agrego un nombre de clase left.
En cada otra "fila" que hago, agrego un nombre de clase right.

Luego flotan a la izquierda y flotan a la derecha para cada uno de estos nombres de clase!

La única complicación es que mi orden de contenido se invierte en las filas "de la derecha", pero eso se puede resolver usando PHP.

Gracias por su ayuda ¡amigos!

#holder{
  width:200px;
  border:1px dotted blue;
  display:inline-block;
}
.box{
  width:100px;
  height:150px;
  background-color:#CCC;
  float:left;
  text-align:center;
  font-size:45px;
}
.one{
  background-color:#0F0;
  height:200px;
}

.two{
  background-color:#0FF;
}

.three{
  background-color:#00F;
  float:right;
}

.four{
  background-color:#FF0;
  float:right;
}
.left{float:left;}
.right{float:right;}

<div id="holder">
  <div class="box one left">1</div>
  <div class="box two left">2</div>
  <div class="box four right">4</div>
  <div class="box three right">3</div>
</div>
</body>

Gracias a thirtydot, me he dado cuenta de que mi respuesta anterior no resolvió correctamente el problema. Aquí está mi segundo intento, que utiliza jQuery como una solución CSS solo parece imposible:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" language="javascript">
            $(document).ready(function() {
                var numberOfColumns = 3;
                var numberOfColumnsPlusOne = numberOfColumns+1;
                var marginBottom = 10;  //Top and bottom margins added
                var kids = $('#holder:first-child').children();
                var add;
                $.each(kids, function(key, value) {
                    add = numberOfColumnsPlusOne+key;
                    if (add <= kids.length){
                        $('#holder:first-child :nth-child('+(numberOfColumnsPlusOne+key)+')').offset({ top: $('#holder:first-child :nth-child('+(key+1)+')').offset().top+$('#holder:first-child :nth-child('+(key+1)+')').height()+marginBottom });
                    }
                });
            });             
        </script>
        <style>
            #holder{
                width:270px;
                border:1px dotted blue;
                display:inline-block; /* Enables the holder to hold floated elements (look at dotted blue line with and without */
            }
            .box{
                width:80px;
                height:150px;
                background-color:#CCC;
                margin:5px;
                text-align:center;
                font-size:45px;
            }
            .one{
                height:86px;
            }
            .two{
                height:130px;
            }
            .three{
                height:60px;
            }
            .four{
                clear:both;
                height:107px;
            }
            .five{
                height:89px;
            }
            .six{
                height:89px;
            }
            .left{float:left;}
            .right{float:right;}
        </style>
    </head>
    <body>      
        <div id="holder">
            <div class="box one left">1</div>
            <div class="box two left">2</div>
            <div class="box three left">3</div>
            <div class="box four left">4</div>
            <div class="box five left">5</div>
            <div class="box six left">6</div>
        </div>
    </body>
</body>

El único problema que queda para mi solución es, lo que sucede cuando una caja es de dos anchos de caja en lugar de solo uno. Todavía estoy trabajando en esta solución. Lo publicaré cuando esté completo.

Si alguien todavía está buscando alternativas, aquí hay una. Intente usar la propiedad (- moz-/ - webkit -) column-width. Se encarga del problema de la altura del div variable. Sin embargo, column-width agrega un nuevo div al final de la columna.

De lo contrario, jQuery Masonry funciona mejor.

Esta puede no ser la solución exacta para todos, pero me parece que (literalmente) pensar fuera de la caja funciona para muchos casos: en lugar de mostrar las cajas de izquierda a derecha, en muchos casos puede llenar la columna izquierda primero, luego ir al centro, llenar eso con cajas y finalmente llenar la columna derecha con cajas. Su imagen sería entonces:

:

Si está utilizando un lenguaje de scripting como php, también puede llenar las columnas de izquierda a derecha agregar un nuevo cuadro a él y salir cuando todas las columnas están llenas. eg (código php no probado):

$col1 = '<div class="col1"> <div>box1</div>';
$col2 = '<div class="col2"> <div>box2</div>';
$col3 = '<div class="col3"> <div>box3</div>';
$col1 .= '<div>box4</div> </div>'; //last </div> closes the col1 div
$col2 .= '<div>box5</div> </div>';
$col3 .= '<div>box6</div> </div>';
echo $col1.$col2.$col3;

Col col1, col col2 y col col3 pueden tener float:left y width: 33%, establece las cajas dentro del div a full width y no float.

Obviamente, si está utilizando javascript / jquery para cargar las cajas dinámicamente, es mejor que las diseñe de esta manera también, como se explica en otras respuestas a este hilo.

Para mostrar simplemente coloque este css en su div y luego tendrá el diseño deseado. no hay necesidad de ningún enchufe o JS.

 .Your_Outer {
    background-color: #FFF;
    border: 1px solid #aaaaaa;
    float: none;
    display:inline-block;
    vertical-align:top;
    margin-left: 5px;
    margin-bottom: 5px;
    min-width: 152.5px;
    max-width: 152.5px;
}

Puede editar el código según sus requisitos:)

En los navegadores modernos simplemente puede hacer:

display: inline-block;
vertical-align: top;