具有不同高度DIV的塊狀網格

Question

我在互聯網上找到了許多有關不同高度圖像網格的解決方案，但我正在嘗試制作一個具有不同高度的簡單div網格。

在這里查看我的JSfiddle：
http://jsfiddle.net/44ffoafu/1/
（我希望塊漂浮到空白處）

我已經嘗試將以下顯示標簽之一添加到div上，但是它們不起作用。

display:inline;
display:inline-block;
display:block;
display:table-cell;

我知道像FreeWall和Masonry這樣的JavaScript，但是我正在尋找一種更簡單的方法以及一種與百分比配合的方法。 我正在尋找僅CSS解決方案，但是如果有人遇到小型javascript hack，請也告訴我！

Answer 1

您可以嘗試以下一種方法：僅使用純CSS： column-count和column-gap 。

首先：像這樣更改您的html：

    <div class='wrapper'>
      <div class="block" id="one"></div>
      <div class="block" id="two"></div>
      <div class="block" id="three"></div>
      <div class="block" id="four"></div>
      <div class="block" id="five"></div>
      <div class="block" id="six"></div>
      <div class="block" id="seven"></div>
      <div class="block" id="eight"></div>
      <div class="block" id="nine"></div>
      <div class="block" id="ten"></div>
      <div class="block" id="eleven"></div>
      <div class="block" id="twelf"></div>
      <div class="block" id="thirteen"></div>
   </div>

然后像這樣更改您的css代碼：

.wrapper {
    -moz-column-count: 4;
    -moz-column-gap: 5px;
    -webkit-column-count: 4;
    -webkit-column-gap: 5px;
    column-count: 4;
    column-gap: 5px;
}
.block{
    width:100%;
    display:inline-block;
    margin-bottom: 0px;
    margin-top:0px;
}
#one {
    height:150px;
    background:#ff0000;
}
#two {
    height:150px;
    background:#00ff00;
}
#three {
    height:300px;
    background:#0000ff;
}
#four {
    height:150px;
    background:#000000;
}
#five {
    height:150px;
    background:#ff0000;
} 

刷新瀏覽器。 對我來說很好。