Question

我在互联网上找到了很多关于不同高度图像网格的解决方案，但我试图制作一个不同高度的简单div网格。

请在此处查看我的JSfiddle：
http://jsfiddle.net/44ffoafu/1/
（我希望块浮动到空白区域）

我已经尝试将以下某个显示标记添加到div中，但它们无法正常工作。

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

我知道像FreeWall和Masonry这样的javascripts，但我正在寻找一种更简单的方法和一种适用于百分比的方法。我只能找到一个CSS解决方案，但如果有人有一个小的javascript黑客，请告诉我！

Answer 1

你可以尝试这个：只使用纯CSS：column-count＆amp; 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;
}

刷新浏览器。它对我来说很好。

阻挡不同高度的网格DIV＆＃39; s

1 个答案: