我有一组不同大小的矩形,我想把它们放在一起,所以尽可能的间隙很小：
但对于：
<div class="Box" > <div class="item item-001" ></div> <div class="item item-003" ></div> <div class="item item-005" ></div> <div class="item item-002" ></div> <div class="item item-004" ></div> <div class="item item-001" ></div> <div class="item item-001" ></div> <div class="item item-003" ></div> <div class="item item-004" ></div> <div class="item item-001" ></div> </div>
和
div.Box { width: 100%; height: 100%; display: block; border: 1px solid #EEE; padding: 3px; } div.item { display: inline-block; border: 1px solid orange; margin: 3px; width: 100px; } div.item-001 { height: 100px; } div.item-002 { height: 150px; } div.item-003 { height: 50px; } div.item-004 { height: 250px; } div.item-005 { height: 350px; }
这就是我得到的：
有没有办法用普通的CSS来达到这个结果？我想避免使用css3和javascript,我希望结果能够在旧版浏览器上运行.如果那是不可能的,那么我想知道css3是否可行,如果没有,那么我想我会试试javascript.
解决方法
如果您使用jQuery并且您不希望自己完成所有操作,那么您可以查看此插件可能会对您有所帮助：
jQuery Masonry
这个插件构建了一个像你正在寻找的页面布局.我要求你避免使用JavaScript,但这样你就可以确定你有旧版浏览器的后备.
