Pływające elementy DIV o różnych wysokościach są wyrównane z odstępem między nimi.

Question

Używam lewych pływających elementów DIV do symulacji układu dwóch kolumn (każdy element div zawiera pole tekstowe do edycji różnych danych, takich jak nazwa, hobby, ...). Tak powinno to wyglądać tak

1 2 
3 4 
5 6 

Teraz moje div Skrzynki nie zawsze są takie same, ponieważ niektóre DIV mieć więcej elementów niż inne. Teraz mój układ wygląda lubi to

1 2 
    2 
    3 4 
    5 6 

Można również zobaczyć efekt na this example jeśli skalowanie tak, że tylko cztery lub trzy colums zostały pokazane. Na przykład. jeśli w kolumnie są wyświetlane 4 kolumny, jest dużo miejsca między Float 1 i Float 6. To nie wygląda dobrze w moim interfejsie użytkownika. To, czego chcę, to mieć Float 6 następujący po Float 1 bez spacji pomiędzy (z wyjątkiem zdefiniowanego marginesu)

Edytuj: Moje DIV zasadniczo zawierają po prostu spławik: lewy i szerokość: 40%, dzięki czemu dwa pasują do siebie ekran

Oto zrzut ekranu pokazujący więcej

Answer 1

jQuery Masonry plugin zrobi dokładnie to, co chcesz.

Jeśli chciał trzymać w czystym CSS, można zrobić coś jak poniżej, ale nie sądzę, że to, co masz zamiar do:

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

I CSS:

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

Answer 2

jeśli można użyć php, tutaj jest mały 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> 

może pomóc;)

Demo robocze na http://www.showcase.glirp.sk/

Answer 3

Oto czyste rozwiązanie CSS. Wziąłem this przykład

Sprawdź, czy chcesz dowiedzieć się więcej. On również używa jQuery Masonry jako zastępczego.

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> 

nadzieję, że to pomoże. Dzięki.