我试图将列表项放在两行中,以便底行的项向右移动 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 -->
如您所见,底部移动的项目被列“切断”。任何解决此问题的想法,或者任何其他解决方案,都值得赞赏。
您可以改用 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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句