我正在尝试用CSS布局解决经典的盒子包装/背包问题.
我希望以最小化元素之间空白的方式排列许多盒子,就像这样;
图像描述了我想要实现的目标http://tydus.net/img/xaZll.png
CSS3列在这里工作非常好 - 盒子按顺序排列,但所有空白空间都被有效地消耗.有一个很小的问题 - 盒子被"剪切",或跨越多个列.不能这样做.
我在一些方框之后使用了经典的div.clearer,但这没有效果 - 盒子仍然跨越那些CSS3列.有一个列跨度CSS属性,但它在任何浏览器中都不受支持;(
或者,我可以自己定义列并手动排列框,但实际上框很常改变高度.
最后一个问题:有没有办法以最小化使用纯CSS的盒子之间的空白来安排盒子？
谢谢!
虽然我自己还没有尝试过，但一个可能的答案可能是使用jQuery Masonry 插件。这似乎符合您所说的要求。
在纯 CSS 和 HTML 中做到这一点将非常困难，你可能不得不放弃一些愿望/要求......
