将列表项目放在两列中，移位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%); 
      } 
     } 
    } 
} 

您可以继续向每列添加更多项目，而不会因此降低可读性。