HTML CSS列左右交替内容

Question

参见附图，了解我目前的情况。

我使用UL与css column-count: 2;和lis有不同的heights和颜色。每个li的内容都是一个数字，它们在HTML中按顺序排列。

正如您在附加布局中看到的那样，一切都在左侧，然后在右侧开始一个新列。我想让布局更像这样：

Left:    Right:
1        2
3        4
5        6

etc etc

目的： 它具有与图像相同的布局，但排序方式不同。

我怎样才能做到这一点？

更新1; 添加了相关代码。

<style>
#items {
     -webkit-column-count: 2;
     -moz-column-count: 2;
     column-count: 2;
}
.item p {
    padding: 20px;
    color: white;
    font-size: 22px;
}
.item-1 {
    height: 120px;
    background: pink;
}
.item-2 {
    height: 180px;
    background: red;
}
.item-3 {
    height: 210px;
    background: gray;
}
.item-4 {
    height: 160px;
    background: green;
}
.item-5 {
    height: 110px;
    background: yellow;
}
.item-6 {
    height: 240px;
    background: maroon;
}
.item-7 {
    height: 120px;
    background: blue;
}
.item-8 {
    height: 420px;
    background: lime;
}
.item-9 {
    height: 300px;
    background: teal;
}
.item-10 {
    height: 190px;
    background: olive;
}</style>

<ul id="items">
    <li class="item item-1"><p>1</p></li>
    <li class="item item-2"><p>2</p></li>
    <li class="item item-3"><p>3</p></li>
    <li class="item item-4"><p>4</p></li>
    <li class="item item-5"><p>5</p></li>
    <li class="item item-6"><p>6</p></li>
    <li class="item item-7"><p>7</p></li>
    <li class="item item-8"><p>8</p></li>
    <li class="item item-9"><p>9</p></li>
    <li class="item item-10"><p>10</p></li>
</ul>

Answer 1

如果你想坚持你的ul，可以做以下事情。浮动li并设置宽度，使每个占用一半的空间。我应该注意这是物品的高度相等。否则，我认为你会降级为两列，一个用于赔率，另一个用于平均值。

＆＃13;

＆＃13;

ul, li {
  margin: 0;
  padding: 0;
  }
ul {
  list-style: none;
  }
li {
  float: left;
  width: 50%;
  }
li:nth-child(1) {
  background-color: #f5f5f5;
  }
li:nth-child(4) {
  background-color: #f5f5f5;
  }

＆＃13;

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

＆＃13;

＆＃13;

＆＃13;