将列表项以 50% 的偏移量放置在两行中

Question

我试图将列表项放在两行中，以便底部行的项目向右移动 50%。项目的顺序也很重要，应该如下图所示：

下面是我想出的代码：

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 -->

如您所见，底部移动的项目按列得到 "cut off"。任何解决此问题的想法，或者任何其他解决方案，我们都将不胜感激。

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

您可以继续向每一列添加更多项目，而不会影响可读性。

将列表项以 50% 的偏移量放置在两行中

Place list items in two rows with 50% shift

html

css

html-lists

css-multicolumn-layout