[英]How to lay down elements vertically from top to bottom, and then from right to left, using a clean HTML markup?
I have a few block-level (or inline-block, it doesn't matter) elements with pre-defined dimensions. 我有一些具有预定义尺寸的块级(或内联块,无关紧要)元素。 I want them at the top-right portion of a container
div
. 我希望它们位于容器
div
的右上角。 I want them being positioned one next to the other, from top to the bottom. 我希望它们从上到下依次定位在另一个旁边。 When there isn't enough space, I want a new column at left of the previous one, also going from top to the bottom.
当没有足够的空间时,我想在前一个的左边有一个新列,也是从顶部到底部。
In other words, I want something like this: 换句话说,我想要这样的东西:
.------------.
| 4 1 |
| 5 2 |
| 3 |
'------------'
How can I achieve it using a pure-CSS solution with a clean HTML? 如何使用带有干净HTML的纯CSS解决方案来实现它?
Even better if it can adapt itself to the available height. 如果它可以适应可用的高度更好。
With a combination of column-width: <something>; column-gap: 0;
结合
column-width: <something>; column-gap: 0;
column-width: <something>; column-gap: 0;
, I can achieve this effect: ,我可以达到这个效果:
.------------.
| 1 4 |
| 2 5 |
| 3 |
'------------'
With float: right;
随着
float: right;
, I can achieve this effect: ,我可以达到这个效果:
.------------.
| 3 2 1 |
| 5 4 |
| |
'------------'
If you change the writing mode, you can get the columns module to do what you want: 如果更改了写入模式,则可以使列模块执行您想要的操作:
http://tinker.io/9f846 http://tinker.io/9f846
ul {
columns: 10em;
direction: rtl;
}
li {
direction: ltr;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.