HTML 模板

Question

我正在尝试构建以下 HTML 模板:

这很简单，如果我使用红色容器 1-4，语法如下:

<div id="red-1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div id="red-2">
  <div>5</div>
  <div>6</div>
</div>
<div id="red-3">
  <div>7</div>
</div>
<div id="red-4">
  <div>8</div>
  <div>9</div>
</div>

https://jsfiddle.net/rbpep3ot/

但我想要一个不必使用红色 DIV 的解决方案，给我以下语法:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

https://jsfiddle.net/nhh4wdLr/1/

这甚至可能吗，鉴于整个东西的高度是固定的，我现在想不出一个解决方案。我不想使用 JS 即时创建红色 DIV。

我不想使用红色 DIV 的原因不是因为我不喜欢它们，更多的是一个理论问题来扩展我对解决这种布局的看法。

非常感谢 =)

Answer 1

检查这个 fiddle :

<div id="container">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div5">5</div>
    <div class="div7">7</div>
    <div class="div8">8</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
    <div class="div6">6</div>
    <div class="div9">9</div>
</div>

#container > div{
    position: absolute;
    border-style: solid; 
    text-align: center;
}

https://jsfiddle.net/jg0ufmx4/2/

当然要用绝对定位，希望有更好的办法