html - 如何水平列出DIV框

我正在尝试制作一个水平网站，网站内的所有对象都是半高或四分之一高。还会有一个水平滚动条。大盒子里的盒子并排放置以填补空间。请参见下图以供引用。

http://i62.tinypic.com/303k7ec.jpg

我曾尝试在 JsFiddle 中制作类似的东西，但它没有填充可用空间。 DMEO

我的代码:

.section {
    position:relative;
    width: auto;
    height:200px;
    background-color:#101010;
}
.boxHalf {
    margin: 2px;
    width:200px;
    height: 200px;
    background:red;
    display:inline-block;
    *display:inline;
}
.boxHalf {
    position:relatives;
    margin: 2px;
    width:200px;
    height: 200px;
    background:red;
    display:inline-block;
    *display:inline;
}
.box2{
    position:relatives;
    margin: 2px;
    width:100px;
    height:100px;
    background:red;
    display:inline-block;
    *display:inline;
}
.scrolls {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 200px;
    white-space:nowrap
}

有没有制作类似图片的想法？例如，当有两个相邻的小盒子时，它们必须相互越过以填充自由空间并且盒子保持紧密。就像图中 4 个小盒子占 1 个大盒子的空间。

最佳答案

您可以为每个子 div 设置负边距。如果您想让间隙不可见，请增加负边距。