CSS Floating Divs con diferente altura están alineadas con el espacio entre ellas

Question

estoy usando DIV flotantes para simular un diseño de dos columnas (cada div contiene un campo de texto para editar datos diferentes, como nombre, pasatiempos, ...). Por lo que debe tener este aspecto

1 2 
3 4 
5 6 

Ahora mis DIV-cajas no son siempre los mismos, ya que algunos DIVs tienen más elementos que los otros. Ahora mi diseño mira gustos esto

1 2 
    2 
    3 4 
    5 6 

También puede ver el efecto en this example si escala el fin de que sólo se muestran cuatro o tres columnas. P.ej. si se muestran 4 columnas en una fila, hay mucho espacio entre Float 1 y Float 6. Esto no se ve bien en mi UI. Lo que quiero es tener Flotante 6 siguiendo Flotador 1 sin espacio intermedio (excepto el margen que defino)

Editar: Mis DIV básicamente solo contienen un flotador: a la izquierda y un ancho: 40%, de modo que caben dos una pantalla

Aquí hay una captura de pantalla que muestra más

Answer 1

El jQuery Masonry plugin va a hacer exactamente lo que quiere.

Si quería seguir con CSS puro, se podría hacer algo como lo siguiente, pero no creo que es lo que vamos a dar:

<div class="col"> 
    <div class="one"></div> 
    <div class="three"></div> 
    <div class="five"></div> 
    <div class="seven"></div> 
</div> 
<div class="col"> 
    <div class="two"></div> 
    <div class="four"></div> 
    <div class="six"></div> 
    <div class="eight">who do we appreciate</div> 
</div> 

Y el CSS:

.col { 
    float: left; 
    width: 200px; 
} 

Answer 2

si se puede usar php, aquí es pequeño truco;)

<?php 
$dir = "your/images/dir/"; 
$img = scandir($dir); // read images to array, or make script which read it from db 
unset($img[0], $img[1]); // remove unnecessary ;) 

$columns = 5; // define how many columns you want to use 
$margin = 5; // define page margin and margin between images in % 

// create columns.. 
for ($c = 0; $c < $columns; $C++) 
{ 
    $main_counter = 0; 

    foreach ($img as $file) 
    { 
     if ($main_counter % $columns == $c) 
     { 
      $column[$c][] = $file; 
     } 

     $main_counter ++; 
    } 
} 
?> 

<! -- show images --> 
<div style="margin: <?php echo $margin; ?>%;"> 
    <?php 
    foreach ($column as $key => $data) 
    { 
     ?> 
     <div style="float: left; width: <?php echo (100/$columns); ?>%;"> 
      <?php 
      foreach ($data as $image) 
      { 
       ?> 
       <div style="margin-bottom: <?php echo $margin; ?>%; margin-right: <?php echo $margin; ?>%; background-image: url(<?php echo $dir . $image; ?>); background-size: cover;"><img src="<?php echo $dir . $image; ?>" style="visibility: hidden; width: 100%;"></div> 
       <?php 
      } 
      ?> 
     </div> 
     <?php 
    } 
    ?> 
</div> 

tal vez ayudar;)

demostración de trabajo en http://www.showcase.glirp.sk/

Answer 3

Aquí hay una solución de CSS pura. Tomé this ejemplo

Échale un vistazo si quieres saber más. También usa jQuery Masonry como alternativa.

CSS:

.masonry { /* Masonry container */ 
    -moz-column-count: 4; 
    -webkit-column-count: 4; 
    column-count: 4; 
    -moz-column-gap: 1em; 
    -webkit-column-gap: 1em; 
    column-gap: 1em; 
} 

.item { /* Masonry bricks or child elements */ 
    background-color: #eee; 
    display: inline-block; 
    margin: 0 0 1em; 
    width: 100%; 
} 

HTML:

<div class="masonry"> 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
    <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div> 
    <div class="item">Incidunt sit unde minima in nostrum? Incidunt sit unde minima in nostrum?</div> 
    <div class="item">Ducimus, voluptates, modi, delectus animi maiores consequuntur repellat quisquam fugiat eum possimus enim culpa totam praesentium magni quae!</div> 
    <div class="item">Lorem ipsum dolor sit amet, dicta dolore adipisci hic ipsam velit deleniti possimus cumque accusantium rerum quibusdam.</div> 
    <div class="item">Neque, vitae, fugiat, libero corrupti officiis sint facilis tempora quidem repudiandae praesentium odit similique adipisci aut.</div> 
    <div class="item">Incidunt sit unde minima in nostrum?</div> 
    <div class="item">Incidunt sit unde minima in unde minima in unde minima in nostrum?</div> 
    <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, praesentium consequatur ducimus commodi quam ex illo omnis dicta reiciendis vel nesciunt deserunt aut sequi nam mollitia perferendis ipsam possimus temporibus!</div> 
    <div class="item">Ab, adipisci, temporibus eaque quis harum perferendis incidunt cupiditate doloribus dolor numquam voluptates ipsum dolore aspernatur et voluptate ipsam beatae animi culpa.</div> 
</div> 

Hope esto le ayudará. Gracias.