html - 如何使用干净的 HTML 标记从上到下，然后从右到左垂直放置元素？

Question

我有一些具有预定义尺寸的块级（或内联块，没关系）元素。我希望它们位于容器的右上角div。我希望它们从上到下并排放置。当没有足够的空间时，我想在前一列的左侧增加一个新列，也是从上到下。

换句话说，我想要这样的东西：

.------------.
|       4  1 |
|       5  2 |
|          3 |
'------------'

如何使用带有干净 HTML 的纯 CSS 解决方案来实现它？

如果它能够适应可用的高度，那就更好了。

---

我可以实现的替代效果（但不是我想要的）：

结合column-width: <something>; column-gap: 0;，我可以达到这个效果：

.------------.
| 1  4       |
| 2  5       |
| 3          |
'------------'

有了float: right;，我可以达到这个效果：

.------------.
|    3  2  1 |
|       5  4 |
|            |
'------------'

Answer 1

如果你改变写作模式，你可以让 columns 模块做你想做的事：

http://tinker.io/9f846

ul {
    columns: 10em;
    direction: rtl;
}

li {
    direction: ltr;
}