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

Question

这是一个简单的问题，但我似乎陷入困境。我试图按照受父母身高限制的特定顺序对齐列表元素。

示例：JSBin

所以我试图将项目的顺序更改为垂直而不是水平 - 现在订单是：

1   2

3

我试图将其更改为：

1   3

2

诀窍是不使用JavaScript或CSS3（它应该与旧版浏览器兼容）。

Answer 1

大。没有JavaScript而没有CSS3？使用以下任一方法都可以轻松实现：

• Flexbox的
• 列

我可以举两个例子：

＆＃13;

＆＃13;

.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
}

＆＃13;

<ul class="example-list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

预览

更多元素：