CSS Floating Divs với chiều cao khác nhau được căn chỉnh với khoảng cách giữa chúng

Question

tôi đang sử dụng các dấu DIV nổi bên trái để mô phỏng bố cục hai cột (mỗi div chứa textfield để chỉnh sửa dữ liệu khác nhau, như tên, sở thích, ...). Vì vậy, nó sẽ trông giống như thế này

1 2 
3 4 
5 6 

Bây giờ các hộp div của tôi không phải lúc nào cũng giống nhau, vì một số DIV có nhiều yếu tố hơn các hộp kia. Bây giờ bố trí của tôi trông thích này

1 2 
    2 
    3 4 
    5 6 

Bạn cũng có thể thấy hiệu ứng về this example nếu bạn mở rộng của bạn để chỉ có bốn hoặc ba colums được hiển thị. Ví dụ. nếu 4 cột được hiển thị trong một hàng có nhiều không gian giữa Float 1 và Float 6. Điều này không nhìn tốt trên giao diện người dùng của tôi. Những gì tôi muốn là có Float 6 sau Float 1 với không có không gian ở giữa (ngoại trừ lề tôi xác định)

Edit: My DIV về cơ bản chỉ chứa một phao: trái và chiều rộng: 40%, do đó hai phù hợp một màn hình

Dưới đây là một bức ảnh chụp hơn

Answer 1

Các jQuery Masonry plugin sẽ làm chính xác những gì bạn muốn.

Nếu bạn muốn gắn bó với CSS tinh khiết, bạn có thể làm một cái gì đó như sau, nhưng tôi không nghĩ rằng đó là những gì bạn đang đi cho:

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

Và CSS:

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

Answer 2

nếu bạn có thể sử dụng php, đây là mẹo nhỏ;)

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

có thể giúp bạn;)

bản demo hoạt động trên http://www.showcase.glirp.sk/

Answer 3

Đây là một giải pháp CSS tinh khiết. Tôi đã lấy this ví dụ

Kiểm tra xem bạn có muốn tìm hiểu thêm không. Ông cũng sử dụng jQuery Masonry làm dự phòng.

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> 

Hy vọng điều này sẽ giúp bạn. Cảm ơn.