Flexbox -编号列表<ol> -2列-从上到下编号

Question

我试图弄清楚如何将编号列表<ol>分割成2列，并从上到下显示数字。

我这里有个有用的小提琴：https://jsfiddle.net/qtr6mjf3/

我使用flex 50%来将列拆分为2。

问题是，它现在显示按以下顺序排列的数字：

1-2

3-4

是否可以重新排序列表项，以便列表显示为：

1-3

2-4

Answer 1

如果您在ol级别删除display:flex并给它一个column:count，那么您的代码就能够完成您想要做的事情。

​

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
ol {
  list-style: none;
  counter-reset: my-awesome-counter;
  /* display: flex; */
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  column-count: 2;
}

ol li {
  counter-increment: my-awesome-counter;
  display: flex;
  width: 50%;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

ol li::before {
  content: counter(my-awesome-counter);
  font-weight: bold;
  font-size: 2rem;
  margin-right: 0.5rem;
  font-family: 'Abril Fatface', serif;
  line-height: 1;
}

body {
  padding: 1rem;
  font-family: sans-serif;
}

<ol>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Tempore nostrum laborum sequi obcaecati.</li>
  <li>Illo iusto dolores magnam ratione!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Illo iusto dolores magnam ratione!</li>
  <li>Illo iusto dolores magnam ratione!</li>
  <li>Illo iusto dolores magnam ratione!</li>
  <li>Illo iusto dolores magnam ratione!</li>
  <li>Illo iusto dolores magnam ratione!</li>
</ol>

​

浏览器对column:count的支持可以找到这里。

Answer 2

2列，并从上到下显示数字。你应该试试这个，我想这些密码对你有帮助，我也给出了一个例子。示例：- https://jsfiddle.net/kapil284/h2v4d7qc/

​

.gallery-section{
  padding: 60px 0; 
}	
.gallery-section .gallery-box{
  background: #fff;
  /* column-width: 300px; */
  column-count: 2;
  column-gap: 15px;
  padding-left: 0;
}
.gallery-section .gallery-box .box{
    display: inline-block;
  width: 100%;
  background: #e8ce93;
  padding: 15px;
  margin-bottom: 15px;
}

<!-- bootstrap4 -->
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    	
    
  
<div class="gallery-section">
    <div class="container">
      <ol class="gallery-box">
        <li class="box">
          <p>1.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. </p>
        </li>
        <li class="box">
          <p>2.Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </li>
        <li class="box">
          <p>3.Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </li>
        <li class="box">
          <p>4.nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </li>
        <li class="box">
          <p>5.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. </p>
        </li>
        <li class="box">
          <p>6.Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </li>
        <li class="box">
          <p>7.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. </p>
        </li>


      </ol>

    </div>
  </div>

​