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

Question

我有几个具有预定义尺寸的块级(或内联块)元素。我想把它们放在容器div的右上角。我希望它们一个挨着另一个，从上到下。当没有足够的空间时，我想在前一列的左边加一列，也是从上到下。

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

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

如何使用纯css解决方案和干净的HTML实现它?

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

---

我可以实现的替代效果(但不是我想要的):

使用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;
}