具有不同高度 DIV 的块网格

block grid with different height DIV's

本文关键字：网格 DIV 高度      更新时间：2023-09-26

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

在这里查看我的 JSfiddle：

http://jsfiddle.net/44ffoafu/1/（我希望块漂浮到空白空间）

我已经尝试将以下显示标签之一添加到div 中，但它们不起作用。

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

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

你可以试试这个：仅使用纯 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;
}

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

相关文章：