html - 制作将堆叠到右侧的瓷砖

Question

我真的希望我没有重复一些众所周知的问题，但我试图搜索它但没有找到任何类似的东西。最接近的是使用 jQuery 的砌体布局，但这不符合我需要的标准。抱歉，如果有任何不清楚的地方，我的母语不是英语。

我需要创建一个 View ，其中多个框 (div) 放置在同一个父 div 中。这些瓷砖中的每一个都具有相同的宽度但不同的高度。每个图 block 都需要放置在距父级上边缘的每个框指​​定的垂直距离处，并尽可能靠近父级的左边缘，以防止图 block 之间重叠。

我想要得到的是:

我尝试了两种解决方案:

1) 给他们 float: left; 和 margin-top: XYZpx;，但不幸的是，当其中一个时，这不起作用tiles 的 margin-top 足够大，可以低于所有其他框。我希望它 float 到父级的左边缘，但边距与其他图 block “碰撞”并放置在所有先前图 block (图 block 5)的右侧:

JSFiddle (您可能需要展开结果窗 Eloquent 能看到实际结果——所有内容都在一行中)

2) 给出图 block position: absolute; 和 top: XYZpx; 但这让我把它们重叠在一列中，没有明显的方法来防止它:

JSFiddle

有没有办法让 float 的图 block 向左“折叠”，或者让绝对定位的 div 不重叠？ (除了分析瓷砖和计算正确的 left: 值，我不知道该怎么做。结果是我需要的，但我不知道如何正确确定 left生成页面时的值:JSFiddle )

编辑:澄清一下，这些图 block 是从 php 生成的，它们的数量未知，高度未知。 PHP 代码插入 top 和 height 值作为内联样式，这些值是根据数据库数据计算得出的。我正在寻找一种方法来设置这些图 block 的样式，使其尽可能向左移动，而不与它们“上方”的任何图 block 重叠(在代码中，它们按起始高度排序 - 从 top: 0px; 到 top: MAXpx;)。此外，没有行 - 瓦片可能具有与父级顶部的距离的任何值。将其视为一种时间表，其中可以同时发生许多条目。

编辑2:根据要求，提供html、css。

编辑3:在一个理想的世界中，这就是我希望发生的事情(注意图 block 4“意识到”它将适合 2。JSFiddle)

Answer 1

您必须在第一个解决方案的第 4 个框末尾使用 clear:both

HTML

<div class="1">1</div>
<div class="2">2</div>
<div class="3">3</div>
<div class="4">4</div>
<div class="clear"></div>
<div class="5">5</div>
<div class="6">6</div>

CSS

.clear{clear:both; width:0; height:0; display:inline-block;}