制作将叠加到右侧的瓷砖

Question

我真的希望我不会重复一些众所周知的问题，但我试图搜索它并且没有找到类似的东西。最接近的是jQuery的砌体布局，但这不符合我需要的标准。对不起，如果有什么不清楚，我不是以英语为母语的人。

我需要创建一个视图，其中多个框（div）放在同一个父div中。每个瓷砖具有相同的宽度但不同的高度。每个瓷砖需要放置在距父母顶部边缘的每个盒子指定的垂直距离，并尽可能靠近父母的左边缘，以防止瓷砖重叠。

我想要得到的是：

我尝试了两种解决方案：

1）向float: left;提供margin-top: XYZpx;，但不幸的是，当其中一个图块的边距大到足以低于所有其他框时，这种情况不起作用。我希望它漂浮到父母的左边缘，但边缘与＃34;碰撞＆＃34;与其他瓷砖一起放置在所有先前瓷砖（瓷砖5）的右侧：

JSFiddle（您可能需要展开结果窗口以查看实际结果 - 一行中的所有内容）

2）给出了瓷砖position: absolute;和top: XYZpx;，但这使我们在一列中重叠，没有明显的方法可以阻止它：

JSFiddle

有没有办法让漂浮的瓷砖和＃34;崩溃＆＃34;在左边，或绝对定位的div不重叠？ （除了分析瓷砖并计算正确的左边：值，我不知道如何做。结果是我需要的，但我不知道如何正确地确定{{1}生成页面时的值：JSFiddle）

编辑： 为了澄清，那些瓷砖是从PHP生成的，其数量未知，具有未知的高度。 PHP代码将left和top值插入为内联样式，从数据库数据计算的值。我正在寻找一种方法来对这些瓷砖进行设计，使其尽可能地离开，而不会与任何瓷砖重叠。＆＃34;以上＆＃34;它们（在代码中，它们按起始高度排序 - 从height到top: 0px;）。此外，没有行 - 磁贴可能与父级顶部的距离有任何值。可以将此视为一种时间表，其中许多条目可以同时发生。

EDIT2： 根据要求，提供了html，css。

EDIT3： 在理想的世界中，这就是我想要发生的事情（请注意第4层和第34页;实现＆＃34;它将适合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;}

Answer 2

您是否看过使用Bootstrap来帮助解决这个问题。 可能有点＆＃34;推或拉＆＃34;。 看看这个 Fiddle ，看它是否对您有帮助。

<div class="container col-xs-12 block">
    <div class="col-xs-1 bg-success Block1">1</div>
    <div class="col-xs-1 col-xs-offset-1 bg-primary Block2">2</div>
    <div class="col-xs-1 bg-success Block3">3</div>
    <div class="col-xs-1 col-xs-pull-4 bg-primary Block4">4</div>
    <div class="col-xs-1 col-xs-pull-4 bg-success Block5">5</div>
    <div class="col-xs-1 col-xs-pull-4 bg-primary Block6">6</div>
</div>