通过CSS显示元素Verticaly

Question

我有一个这样的列表:

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

我想像这张照片一样展示他们

*那种方式在开始时填写第一列然后第二列等.

Answer 1

使用列数:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: 2;
}

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

我的colomns数字是动态的,可能会改变.但是一列中有3个项目(最多).

使用flex:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 60px; /* 60 / 3 = 20 */
  display: flex;
  flex-flow: column wrap;
}

ul > li {
  height: 20px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

但是,你必须添加一些固定的height.