divs de altura diferentes flotan en dos columnas

Tengo dos columnas y quiero apilar divs de diferentes alturas en orden de aparición.divs de altura diferentes flotan en dos columnas

Los divs se crean dinámicamente.

Si solo los floto en el 50% del ancho, pronto me encuentro en una situación en la que div # 4 es 5 veces más alta que los pocos divs entrantes. Entonces el siguiente div se alinea arriba con la parte inferior del div anterior.

necesito para encajar divs niño en un contenedor para ser coincidencia exacta de esta manera:

----- ------- 
    1  2 
----- 
    3 ------- 
----- 4 
    5 
----- 
    6 
----- 
    7 ------- 
----- 8 
    9 

----- 
10 ------- 
     11 
     ------- 
     ------- 
-----

Aquí es fragmento de código de lo que he hecho:

<style> 
    .box {background:#20abff; color:#fff; width:50%; margin: 5px;} 
    .left {float:left;} 
    .right {float:right;} 
    .container {width:205px;} 
</style> 
    <body> 
     <div class="container"> 
      <div class="box left" style="height:60px;">1</div> 
      <div class="box left" style="height:80px;">2</div> 
      <div class="box left" style="height:30px;">3</div> 
      <div class="box left" style="height:70px;">4</div> 
      <div class="box left" style="height:60px;">5</div> 
      <div class="box left" style="height:20px;">6</div> 
      <div class="box left" style="height:40px;">7</div> 
      <div class="box left" style="height:90px;">8</div> 
      <div class="box left" style="height:30px;">9</div> 
     </div> 
    </body>

y parece similar a este

http://dl.dropbox.com/u/142343/divstack.html

apreciar ayuda

Fuente

2012-07-10 dzona

¿Puedes publicar tu html y css actuales? – Erica

[¿Qué has probado?] (Http://mattgemmell.com/2008/12/08/what-have-you-tried/) – avall

Veo lo que estás tratando de hacer ... ¿cuál es el problema? – Oofpez

Vas a tener que hacer esto con JavaScript. Si está utilizando jQuery, hay un excelente complemento llamado Masonry. También está el non jQuery version.

citar el README on GitHub:

Masonería es una secuencia de comandos diseño de cuadrícula dinámica. Piense en ello como el flip-side de CSS flota. Mientras que la flotación ordena los elementos horizontalmente, luego verticalmente, la Albañilería organiza los elementos verticalmente, colocando cada elemento en el siguiente punto abierto en la cuadrícula. El resultado minimiza huecos verticales entre elementos de altura variable, al igual que un mason montaje de piedras en una pared.

El single column layout es probablemente lo que estás buscando.

Si no le importa dejar los navegadores más antiguos en el polvo, no son el CSS3 column properties. Hay un ejemplo here, on Quirksmode, y algo de documentación en el MDN.

Fuente

2012-07-10 13:51:05 Bojangles

+1 El complemento Masonry es el camino a seguir para este diseño. –

Pero la mampostería no funciona en IE ... cualquier solución –

@Rama ¿Lo intentó en IE? [El sitio de demostración] (http://masonry.desandro.com/) funciona perfectamente en IE10, 8 y 7. – Bojangles

Utilice 2 div como contenedor, coloque ambas columnas en este contenedor div, por lo tanto, deje este div flotante hacia la izquierda y hacia la derecha ... puede funcionar ... También funcionará el diseño de cuadrícula.

Fuente

2012-07-10 15:04:44

divs de altura diferentes flotan en dos columnas

Respuesta

Cuestiones relacionadas