我真的希望我不会重复一些众所周知的问题,但我试图搜索它并且没有发现任何类似的东西.最接近的是jQuery的砌体布局,但这不符合我需要的标准.对不起,如果有什么不清楚,我不是母语为英语的人.
我需要创建一个视图,其中许多框(div)放在同一个父div中.每个瓷砖具有相同的宽度但不同的高度.每个瓷砖需要放置在距父母顶部边缘的每盒指定垂直距离处,并尽可能靠近父母的左边缘,以防止瓷砖之间重叠.
我想要得到的是：
我试过两个解决方案：
1)给他们漂浮：左; margin-top：XYZpx;,但遗憾的是,当其中一个tile的margin-top足够大以至于低于所有其他Box时,它就不起作用了.我希望它浮动到父级的左边缘,但边距与其他图块“碰撞”并放置在所有先前图块的右侧(图块5)：
JSFiddle(您可能需要展开结果窗口以查看实际结果 – 一行中的所有内容)
2)给出瓷砖位置：绝对;和顶部：XYZpx;但这让我在一列中重叠,没有明显的方法可以阻止它：
有没有办法让浮动的瓷砖“折叠”到左边,或者绝对定位的div不重叠？ (除了分析瓷砖和计算正确的左边：值,我没有线索如何做.结果是我需要的,但我不知道如何在生成页面时正确地确定左值：JSFiddle )
编辑：
为了澄清,这些瓷砖是从PHP生成的,其数量未知,具有未知的高度. PHP代码将top和height值插入为内联样式,从数据库数据计算的值.我正在寻找一种方法来将这些瓷砖设置为尽可能远离左边而不与“上方”任何瓷砖重叠(在代码中,它们按起始高度排序 – 从顶部开始：0px;到顶部：MAXpx; ).此外,没有行 – 瓷砖可能与父母顶部的距离有任何值.可以将此视为一种时间表,其中许多条目可以同时发生.
EDIT2：
根据要求,提供了html,css.
EDIT3：
在一个理想的世界里,这就是我想要发生的事情(请注意,瓷砖4“意识到它将适合于2. JSFiddle”)
解决方法
您必须使用clear：在第一个解决方案的第4个方框的末尾
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;}
