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

Question

我想要从上到下和从左到右组织的 css block 。

为了更好地解释这是一张图片，其中包含我到目前为止所获得的内容以及我希望使用 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

这将产生