Altura div cambiable HTML con ancho estático muchos divs

Creo que todos conocen este sitio. http://pinterest.com/ y no quiero crear un sitio como este, pero tengo otro propósito: quiero crear divs debajo de divs con ancho estático y el valor de altura siempre cambiable.

Hice el código HTML aquí está: http://jsbin.com/ihekiv

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    div{
        margin: 5px;
    }
    .width-200{
        width: 200px;
    background-color: #FCF;
    }
    .float-left{
        float: left;
    }
</style>


</head>

<body>

    <div class="width-200 float-left color-01" style="height: 300px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

</body>
</html>

En mi código HTML, puede ver claramente que el div cinco no pasa por debajo del div uno, ¿cómo puedo tomar este div cinco por debajo del div uno? puede ser que este div uno cambie su altura puede ser que algunos divs cambien su altura ahora Quiero saber cómo puedo hacer esto cuando la altura de los divs se vuelve variable. ¿Podría alguien decirme cómo hacer esto?

preguntado el 12 de junio de 12 a las 16:06

No es posible con CSS. Complemento Jquery: wookmark.com/jquery-plugin -

2 Respuestas

CO no puedo hacer esto, porque tiene un número variable de columnas.

En su lugar, use jQuery Masonry: http://masonry.desandro.com/

También hay una versión sin marco, Vanilla Masonry: http://vanilla-masonry.desandro.com/

contestado el 23 de mayo de 17 a las 11:05

Lo único que puedo pensar es

body {
-webkit-column-count: 5;
-webkit-column-gap: 0px;
-webkit-column-width: 200px;
}

No es una buena solución y solo es compatible con webtkit.

Respondido el 12 de junio de 12 a las 18:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.