CSS Floating Divs mit unterschiedlicher Höhe sind mit dem Abstand zwischen ihnen ausgerichtet

Question

Ich benutze linke Floating DIVs, um ein zweispaltiges Layout zu simulieren (jedes Div enthält ein Textfeld zur Bearbeitung verschiedener Daten, wie Name, Hobbies, ...). So sollte es so aussehen

1 2 
3 4 
5 6 

Nun meine div-Boxen sind nicht immer gleich, da einige DIVs als die anderen mehr Elemente haben. Jetzt ist mein Layout sieht gefällt dieses

1 2 
    2 
    3 4 
    5 6 

Sie können auch die Wirkung auf this example sehen, wenn Sie Ihre Waage so, dass nur vier oder drei Spalten angezeigt. Z.B. Wenn 4 Spalten hintereinander angezeigt werden, ist zwischen Float 1 und Float 6 viel Platz. Das sieht auf meiner Benutzeroberfläche nicht gut aus. Was ich will, ist Float 6 nach Float 1 ohne Leerzeichen dazwischen zu haben (außer dem Rand, den ich definiere)

Edit: Meine DIVs enthalten im Grunde nur einen Schwimmer: links und eine Breite: 40%, so dass zwei passen ein Bildschirm

Hier ist ein Screenshot mehr zeigt genau

Answer 1

Die jQuery Masonry plugin wird tun, was Sie wollen.

Wenn Sie mit reinem CSS bleiben wollten, könnten Sie so etwas wie die folgenden tun, aber ich glaube nicht, es ist was du für:

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

Und die CSS:

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

Answer 2

, wenn Sie pHP verwenden können, ist hier kleiner Trick;)

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

vielleicht haben Sie helfen;)

funktionierende Demo auf http://www.showcase.glirp.sk/

Answer 3

Hier ist eine reine CSS-Lösung. Ich nahm this Beispiel

Überprüfen Sie es, wenn Sie mehr erfahren möchten. Er verwendet auch jQuery Masonry als Fallback.

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 this Ihnen helfen. Vielen Dank.