如何为不同高度的元素制作网格？答案

【问题标题】：How to Make a Grid for Elements with different heights?如何为不同高度的元素制作网格？
【发布时间】：2019-04-24 01:13:58
【问题描述】：

我正在开发一个 webapp，但遇到了以下问题：

我想显示一个可以有不同块高度和宽度的瓷砖网格。

出于兼容性原因，我可以不使用 CSS GRID。

我得到一个具有不同 blockHeights 和 blockWidths 的 Tiles 列表以显示在我的网格中。例如。 blockHeight 为 2 的图块（如上图中的第一个图块）现在的高度只有两倍高。这显然不会创建另一个 Row，因此两个小图块下方有一个空白空间。

如何在不使用 CSS GRID 的情况下删除网格的空白区域？

提前致谢！

【问题讨论】：

如何删除它们？上移更多块？
看看这个，我想这就是你想要的：haltu.github.io/muuri
我想“删除”空白，以便第二行中的瓷砖占据空白处。所以大瓷砖应该占据 2 行
那么你试过浮动它们吗？

标签： javascript html css web-applications

【解决方案1】：

使用以下库，您可以实现：

https://haltu.github.io/muuri/

盒子尺寸的 CSS 计算与默认盒子尺寸成正比；占边距。

var grid = new Muuri('.grid', {
  dragEnabled: true
});

.grid {
  position: relative;
  background: #6EB3CA
}
.item {
  display: block;
  position: absolute;
  width: 64px;  /* Default 1 unit */
  height: 64px; /* Default 1 unit */
  margin: 4px;  /* Margin */
  z-index: 1;
  background: #fff;
  color: #000;
  border-radius: 4px;
}
.item.muuri-item-dragging {
  z-index: 3;
}
.item.muuri-item-releasing {
  z-index: 2;
}
.item.muuri-item-hidden {
  z-index: 0;
}
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 64px;
}

.item-6x2 {
  width:  424px; /* (64 * 6) + (4 * 10) */
  height: 136px; /* (64 * 2) + (4 *  2) */;
}
.item-2x1 {
  width:  136px; /* (64 * 2) + (4 * 2) */
  height:  64px; /* (64 * 1) + (4 * 0) */;
}
.item-6x2 .item-content {
  line-height: 136px;
}

<script src="https://unpkg.com/web-animations-js@2.3.1/web-animations.min.js"></script>
<script src="https://unpkg.com/hammerjs@2.0.8/hammer.min.js"></script>
<script src="https://unpkg.com/muuri@0.7.1/dist/muuri.min.js"></script>

<div class="grid">
  <div class="item item-6x2">
    <div class="item-content">
      6×2
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
  <div class="item item-2x1">
    <div class="item-content">
      2×1
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

对不起，你不能只使用 css 吗？

.floatingItems {
  float: left;
}

这样，项目将始终尝试与左侧对齐。这样您就不必包含库。

小提琴：https://jsfiddle.net/49nq3afx/4/

【讨论】：

【解决方案3】：

用户10357213，

您有两个未解决的问题。如果给出的答案有帮助，如果您接受相应的答案会很好。或者至少回答一下这个答案是否适合您以及为什么不适合您。

（不能评论jet，这就是我发布另一个答案的原因。对不起）

【讨论】：