将列表项目放在两列中，移位50％

Z时代
2024-01-10
分类：问答

我试图将列表项放置在两行中，以便从最下面一行的项目向右移动50％。该项目的顺序也很重要，并应该像下面的图片：将列表项目放在两列中，移位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>

正如您所看到的，底部的移位项目会“截断”在列中。任何想法如何解决这个问题，或者任何其他解决方案，赞赏。

回答：

您可以使用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>

回答：

由于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%); 
      } 
     } 
    } 
}

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

以上是将列表项目放在两列中，移位50％的全部内容，来源链接： utcz.com/qa/257935.html

将列表项目放在两列中，移位50％

回答：

回答：

其他人也看了：