Css 按行索引的列布局

我的设计如下：

有9个字段，例如段落，具有相同的宽度和未知的高度（我不能简单地浮动它们）

我尝试了多列布局，但需要切换到元素，以便

1-4-7-2-5-8-3-6-9

“Working”HTML是（'Working'在引号中，因为项目顺序不正确）

div{
-webkit栏目：3个；
-moz列：3列；
栏目：3个；
-webkit柱间隙：2px；
-moz柱间距：2px；
柱间距：2px；
}
p{显示：内联块；宽度：200px；边距：1px}
1
4
7
2
5
8
3
6
9

理想的（也是唯一正确的）HTML是：

1
2
3
4
5
6
7
8
9

但结果是

有没有CSS解决方案？不通过JavaScript计算大小，而是真正寻找CSS。

---

谢谢。

你想做什么？@BrettDeWoody:到目前为止，我已经把它和我的问题联系起来了。但是我不知道如何使用“正确的”HTML（）更新我的CSS。你想做什么？@BrettDeWoody:我已经做了，我在我的问题中链接了它。但是我不知道如何使用“正确的”HTML（）更新我的CSS。

<style>
    div {
        -webkit-columns: 3;
           -moz-columns: 3;
                columns: 3;

        -webkit-column-gap: 2px;
           -moz-column-gap: 2px;
                column-gap: 2px;
    }

    p {display: inline-block; width: 200px; margin: 1px}
</style>
<div>
    <p style="background: red; height: 100px">1</p>
    <p style="background: blue; height: 120px">4</p>
    <p style="background: brown; height: 100px">7</p>
    <p style="background: blue; height: 140px">2</p>
    <p style="background: red; height: 80px">5</p>
    <p style="background: yellow; height: 90px">8</p>
    <p style="background: green; height: 90px">3</p>
    <p style="background: brown; height: 140px">6</p>
    <p style="background: pink; height: 120px">9</p>
</div>

<div>
    <p style="background: red; height: 100px">1</p>
    <p style="background: blue; height: 140px">2</p>
    <p style="background: green; height: 90px">3</p>
    <p style="background: blue; height: 120px">4</p>
    <p style="background: red; height: 80px">5</p>
    <p style="background: brown; height: 140px">6</p>
    <p style="background: brown; height: 100px">7</p>
    <p style="background: yellow; height: 90px">8</p>
    <p style="background: pink; height: 120px">9</p>
</div>