Question

我正在尝试制作一个水平网站，其中的所有对象都是半高或四分之一高度。还会有一个水平滚动条。大盒子里面的盒子彼此相邻，以填补空间。请参见下面的图片以供参考。

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个小盒子占据了一个大盒子的空间。

Answer 1

您可以为每个子div提供负余量。如果你想让间隙不可见，请增加负边距。

.scrolls > div{
   margin-left: -5px;
}

DEMO http://jsfiddle.net/a_incarnati/9922871h/2/

Answer 2

使用float:left;

这是一个jsfiddle：demo

Answer 3

这是由inline-block的空白错误引起的。

最简单的解决方案是将font-size: 0应用于父容器。

.section {
    position:relative;
    width: auto;
    height:200px;
    background-color:#101010;
    font-size: 0;
}

然后，您需要在其中重新应用任何字体大小。还有其他方法可以解决此问题，包括注释和删除空格。有关详细信息，请参阅this article。

Answer 4

您可以使用浮动来定位框，但是对于更复杂的布局，您必须绝对将元素放置在该部分上。

这是我为此做的小提琴的链接：http://jsfiddle.net/arnellebalane/byvvfwn2/1/

这些方框具有以下共同风格：

.box {
  float: left;
  background-color: red;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

修改

为了让较小的盒子堆叠在一起，我添加了以下规则：

.quarter + .quarter:nth-of-type(odd) { margin-top: 100px; margin-left: -100px; }

这将使每个其他较小的盒子前面有另一个较小的bos（有意义吗？）在它之前的小盒子下面。

如何水平列出DIV框

4 个答案: