html - 如何按特定顺序对齐列表元素

Question

这是一个简单的问题，但我似乎被卡住了。我正在尝试按仅受其父级高度限制的特定顺序对齐列表元素。

示例:JSBin

所以我试图将元素的顺序更改为垂直而不是水平 - 现在的顺序是:

1   2

3

我正在尝试将其更改为:

1   3

2

诀窍是在不使用 JavaScript 或 CSS3 的情况下执行此操作(它应该与旧浏览器兼容)。

Answer 1

太棒了。没有 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>

预览:

更多元素: