如何使用干净的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;
}