CSS Floating Divs avec différentes hauteurs sont alignées avec l'espace entre eux

Question

J'utilise les DIVs à gauche pour simuler une disposition à deux colonnes (chaque div contient un champ de texte pour éditer différentes données, comme le nom, les hobbies, ...). Donc, il devrait ressembler à ceci

1 2 
3 4 
5 6 

Maintenant, mes boîtes div-ne sont pas toujours les mêmes, puisque certains ont DIVs plus d'éléments que les autres. Maintenant, ma mise en page ressemble aime ça

1 2 
    2 
    3 4 
    5 6 

Vous pouvez également voir l'effet sur this example si vous redimensionnez votre sorte que seulement quatre ou trois colonnes sont représentés. Par exemple. Si 4 colonnes sont affichées dans une rangée il y a beaucoup d'espace entre Float 1 et Float 6. Cela ne semble pas bien sur mon interface utilisateur. Ce que je veux est d'avoir Float 6 suivant Float 1 sans espace entre (sauf la marge que je définis)

Editer: Mes DIVs contiennent essentiellement un flottant: gauche et une largeur: 40%, de sorte que deux correspondent un écran

Voici une capture d'écran montrant plus

Answer 1

Le jQuery Masonry plugin va faire exactement ce que vous voulez.

Si vous voulez coller avec CSS pur, vous pouvez faire quelque chose comme ce qui suit, mais je ne pense pas que c'est ce que vous allez pour:

<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> 

Et le CSS:

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

Answer 2

si vous pouvez utiliser php, voici petit truc;)

<?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> 

vous aider peut-être;)

démo de travail sur http://www.showcase.glirp.sk/

Answer 3

Voici une solution CSS pure. Je ai pris this exemple

Check it out si vous voulez en savoir plus. Il utilise également jQuery Masonry comme solution de repli.

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> 

Espérons que cela vous aidera. Merci.