各种尺寸的方格网格

Question

是否可以只使用html和css来做类似的事情：

另一个要求是，因为div是在列表中自动生成的， 它们不应该封装在其他html元素中（例如，为每行添加div是不可能的）：

html看起来像那样：

    <div class="s"></div>
    <div class="s"></div>
    <div class="big_s"></div>
    <div class="s"></div>
    <div class="s"></div>
    <div class="s"></div>
    <div class="s"></div>
    <div class="s"></div>
    <div class="big_s"></div>
    <div class="s"></div>
    <div class="s"></div>
    <div class="s"></div>
    <div class="s"></div>
    <div class="s"></div>

这意味着它们是列表形式。

我现在还没有找到如何做到这一点，似乎使用float：left和clear：两者都不是解决方案，也没有使用display：inline-block

如果有人知道如何做到这一点，那就太棒了！

谢谢。

Answer 1

这是您可以使用提供的HTML代码以及float: left overflow: hidden上的.bs或{{1}}获得的最接近的代码：http://codepen.io/anon/pen/GIcAi（只需在两行中注释/注释最后一条规则）

你必须依靠绝对定位和非常复杂的选择器在第一次修改HTML代码时失败...这就是为什么像Masonry这样的定位需要JavaScript（因为元素的高度几乎总是未知的：字体，缩放等等）除了像你这样的测试用例之外，它会有所不同;））