CSS：在视觉上分开严格标记

Question

我有这样的HTML标记：

<div class="top"> </div>
<div class="bottom"> </div>

<div class="top"> </div>
<div class="bottom"> </div>

<div class="top"> </div>
<div class="bottom"> </div>

...

如何通过top DIV顶部的所有bottom DIV移动CSS，如下所示：

 top | top | top
 ----------------
 bottom
 ----------------
 bottom
 ----------------
 bottom

两种类型的DIV都应具有可变高度。 top DIV也应该有可变的宽度。

Answer 1

没有绝对定位就无法做到。另外，如果我可以说没有理由以这种方式去做。必须有一种更直观的方式。