將列表項目放在兩列中，移位50％

Question

我試圖將列表項放置在兩行中，以便從最下面一行的項目向右移動50％。該項目的順序也很重要，並應該像下面的圖片：

下面是代碼，我想出了：

https://codepen.io/Deka87/pen/qVgjGv

ul { 
 
    list-style: none; 
 
    padding-left: 0; 
 
    margin-bottom: 0; 
 
    column-count: 3; 
 
    column-width: 33.33%; 
 
} 
 
ul > li:nth-child(even) { 
 
    transform: translateX(50%); 
 
}

<ul> 
 
<li> 
 
    1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
</li> 
 
<li> 
 
    2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
</li> 
 
<li> 
 
    3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
</li> 
 
<li> 
 
    4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
</li> 
 
<li> 
 
    5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
</li> 
 
<li> 
 
    6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
</li> 
 
</ul> 
 
<!--/.timeline-list -->

正如您所看到的，底部的移位項目會「截斷」在列中。任何想法如何解決這個問題，或者任何其他解決方案，讚賞。

Answer 1

您可以使用CSS網格佈局，而不是

ul { 
 
    list-style: none; 
 
    padding-left: 0; 
 
    margin-bottom: 0; 
 
    display: grid; 
 
    grid-template-rows: repeat(2, 1fr); /* number of rows and space taken*/ 
 
    grid-gap: 20px; /* gap between each row and column*/ 
 
    grid-auto-flow: column; /* how the grid is going to flow */ 
 

 
} 
 

 
ul>li:nth-of-type(even) { 
 
    transform: translateX(50%); 
 
}

<ul> 
 
    <li> 
 
    1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
    </li> 
 
    <li> 
 
    2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
    </li> 
 
    <li> 
 
    3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
    </li> 
 
    <li> 
 
    4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
    </li> 
 
    <li> 
 
    5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
    </li> 
 
    <li> 
 
    6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel! 
 
    </li> 
 
</ul>

Answer 2

由於CSS網格沒有被普遍接受，這是一個使用Flexbox的這所有的主流瀏覽器的解決方案。 像這樣劃分你的HTML，它會給你一個計算信息的有序方式。

<div class="parent"> 
    <div class="column"> 
     <div class="item">1. Lorem ipsum!</div> 
     <div class="item">2. Lorem ipsum!</div> 
    </div> 
    <div class="column"> 
     <div class="item">3. Lorem ipsum!</div> 
     <div class="item">4. Lorem ipsum!</div> 
     </div> 
    <div class="column"> 
     <div class="item">5. Lorem ipsum!</div> 
     <div class="item">6. Lorem ipsum!</div> 
    </div> 
</div> 

在此之後，使用Flexbox的使列和該列內的每個項目，給它的50％的寬度（它的父的50％）和100％轉化的偶數子（意味着它的寬度的100％ ）

.parent { 
    display: flex; 
    flex-flow: row nowrap; 
    width: 100%; 

    .column { 
     display: flex; 
     flex-flow: column nowrap; 
     width: 100%; 

     .item { 
      width: 50%; 
      &:nth-child(even) { 
       transform: translateX(100%); 
      } 
     } 
    } 
} 

您可以繼續向每列添加更多項目，而不會因此降低可讀性。