这是一个简单的问题,但我似乎被卡住了。我正在尝试按仅受其父级高度限制的特定顺序对齐列表元素。
示例:JSBin
所以我试图将元素的顺序更改为垂直而不是水平 - 现在的顺序是:
1 2
3
我正在尝试将其更改为:
1 3
2
诀窍是在不使用 JavaScript 或 CSS3 的情况下执行此操作(它应该与旧浏览器兼容)。
最佳答案
太棒了。没有 JavaScript 也没有 CSS3?这可以使用以下任一方式轻松实现:
- flex 盒子
- 专栏
我可以给你举个例子:
.example-list {
list-style: none;
padding: 0;
margin: 0;
width: 120px;
-webkit-column-count: 2;
-moz-column-count: 2;
-o-column-count: 2;
column-count: 2;
}
.example-list li {
display: inline-block;
background: red;
padding: 20px;
margin: 5px;
color: #FFF;
float: left
}
<ul class="example-list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
预览:
更多元素:
关于html - 如何按特定顺序对齐列表元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32521794/