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

我想有css块，从上到下，从左到右组织

为了更好地解释这是一幅我目前所拥有的图像，以及我希望通过CSS实现的目标：

代码如下：

HTML:

下面是JSFIDLE：

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

我希望有人能以任何方式帮助我，并原谅我的知识不是那么渊博

谢谢

现在我知道还有一些问题看起来像是重复的。我不知道，但我想将其集成到水平无限滚动中，所以我相信这可能是一个“原始问题”

---

毕竟，我不知道如何描述这一点，所以在发布后显示了这些内容。

我将使用一个以上的分组（每4个元素）

演示

这将产生

---

很抱歉，我仍然无法准确理解您想要什么。您的问题中没有“？”。简而言之，是一个无限水平滚动网格，我不知道或几乎不知道如何制作它。在静态环境中，这基本上回答了我的问题。我试图让它在一个动态的环境中工作，但由于我可以控制环境，这就足够了。非常感谢。@beppe9000如果您以4个元素为一组添加元素，CSS将适用于动态环境。。（很高兴能帮忙）

<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

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

<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;}