-1

是否可以只使用 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:both 都不是解决方案，也没有使用 display:inline-block

如果有人知道我怎么能做到这一点，那就太好了！

谢谢你。

4

1 回答 1

1

float: left这是您可以通过提供的和或overflow: hidden上的 HTML 代码实现的最接近.bs：http: //codepen.io/anon/pen/GIcAi（只需在最后一条规则的两行中注释掉/注释）

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

于 2013-09-15T21:05:55.910 回答