CSS将一些元素堆叠到底部

Question

我有一个包含这个 HTML 的页面

<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
... variable amount of divs

我想创建此布局，其中页面的高度和宽度均为 100%。前两个 div 应位于顶部，所有后续 div 应堆叠在底部。

div 是自动生成的 - 我不能区别对待前两个(仅在样式表中)。

我怎样才能做到这一点？我只需要支持最新版本的 Chrome 和 Chromium。

--------------------------
| ----------  ---------- |
| | div 1  |  |  div 2 | | <-- aligned to top of page
| |        |  |        | |
| ----------  ---------- |
|                        |
|                        | <-- variable space
|                        |
| ----------------       |
| |    div 3     |       |
| ----------------       | <-- aligned to bottom of page
| ----------------       |
| |    div 4     |       |
| ----------------       |
--------------------------

Answer 1

您可以使用 :nth-child 来定位前两个 div 并将它们堆叠成一行并将其余的堆叠在底部..