使用CSS的上下左 - 右 - 上 - 左 - 右 - 上 - 下内容流

Question

我想拥有从上到下，从左到右组织的CSS块。

为了更好地解释这是一张带有我迄今为止所拥有的图像以及我想用CSS实现的目标：

以下是代码：

HTML：

<div id="container">
<div class="box" style="background-color: #000;">1</div>
<div class="box" style="background-color: #fff;">2</div>
<div class="box" style="background-color: #000;">3</div>
<div class="box" style="background-color: #fff;">4</div>
<div class="box" style="background-color: #000;">5</div>
<div class="box" style="background-color: #fff;">6</div>
<div class="box" style="background-color: #000;">7</div>
<div class="box" style="background-color: #fff;">8</div>
<div class="box" style="background-color: #000;">9</div>
</div

CSS：

#container {height: 200px; background-color: #2795b6;}
.box {color: red; display: block;height:50px;width:50px}

这是JsFiddle：http://jsfiddle.net/ySG5Y

这是我想要制作的水平无限滚动页面的一部分。现在你知道你可以更好地了解情况了。

我希望有人能够以任何方式帮助我，请原谅我不太了解的知识。

由于

聚苯乙烯。现在我知道还有一些其他问题似乎是重复的。我不知道，但我想将其整合到水平无限滚动中，所以我相信这可能是一个“原始问题”。

毕竟我不知道如何描述这些，所以那些在出版后显示。

Answer 1

我会再使用一个分组（每4个元素）

<div id="container">
    <div class="group">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    <div class="group">
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
    </div>
    <div class="group">
        <div class="box">9</div>
    </div>
</div>

并使用

#container {
    height: 200px;
    background-color: #2795b6;
    font-size:0; /*to ignore whitespace due to inline-block of group elements*/
    white-space:nowrap; /*to avoid wrapping of groups once they fill their container*/
}
.group{
    position:relative;
    display:inline-block; /*make them stack horizontally*/
    width:50px;
    height:200px;
    font-size:16px;
    vertical-align:top;
}
/*for the even groups set the box elements to absolute and reverse order*/
.group:nth-child(even) .box{position:absolute;left:0;}
.group:nth-child(even) .box:nth-child(1){bottom:0;}
.group:nth-child(even) .box:nth-child(2){bottom:50px;}
.group:nth-child(even) .box:nth-child(3){bottom:100px;}
.group:nth-child(even) .box:nth-child(4){bottom:150px;}

.box {
    color: red;
    display: block;
    height:50px;
    width:50px;
    text-align:center;
    line-height:50px;
    background:black;
}
.box:nth-child(even) {background:white;}

http://codepen.io/gpetrioli/pen/qAIKd

演示

这将产生