代码之家 › 专栏 › 技术社区 › sdvnksv

将列表项按50%的移位放在两行中

css-multicolumn-layout html-lists css html

-1

sdvnksv · 技术社区 · 7 年前

我试图将列表项放在两行中,以便将最下面一行的项向右移动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 -->

如您所见,底部的移位项被列“截断”。如果您有任何关于如何解决此问题的想法,或者任何其他解决方案,我们将不胜感激。

2 回复 | 直到 7 年前

dippas 7 年前

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

-1

Vatsalya Prakash 7 年前

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

通过这种方式,您可以在不损失可读性的情况下继续向每列添加更多项。