如何在一个页面中放置不同尺寸的物品，避免它们之间有太多间隙？

Question

我有一组不同大小的矩形，我想把它们放在一起，所以尽可能的间隙很小：

但对于：

<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。

链接到小提琴： http ： //jsfiddle.net/hamidsafdari/aa10xzzt/1/

Answer 1

如果你使用jQuery并且你不想自己做所有事情，那么你可以看看这个可以帮助你的插件： jQuery Masonry

这个插件构建了一个像你正在寻找的页面布局。 我要求你避免使用JavaScript，但这样你就可以确定你有旧版浏览器的后备。

Answer 2

由于项目具有相同的宽度，您可以使用多列布局并将元素放在另一个下面。

div.box {
    width: 100%;
    height: 100%;
    display: block;
    border: 1px solid #EEE;
    padding: 3px;
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
}

您可能需要更改列数。

小提琴

Answer 3

将font-size:0应用于父元素，并从子元素中删除margin 。

div.box {
width: 100%;
height: 100%;
display: block;
border: 1px solid #EEE;
padding: 3px;
font-size:0;        
}

div.item {
display: inline-block;
border: 1px solid orange;
}

DEMO

Answer 4

div.vertical{
    height: 150px;
    width: 100px;
}
div.full{
    height: 300px;
    width: 100px;
}

小提琴

请尝试以上小提琴