Question

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

以下是我提出的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

正如您所看到的，底部的移位物品被切断了＃34;由专栏。任何想法如何解决这个问题，或者任何其他解决方案，都表示赞赏。

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％

2 个答案: