主页 / 问题 / 619955
Accepted
Игорь
Asked:2020-01-27 03:59:24 +0000 UTC2020-01-27 03:59:24 +0000 UTC

将列表拆分为多列

  • 772

有一个列表，其中的项目应该垂直跟随，当到达固定高度的父级的底部边界时，它们应该被转移到一个新的列。

使用的实现column-count将列表项垂直放置，但列表分为三列，项数相同，您需要将第一列的高度填充为 100%。

.category-list {
  list-style: none;
  column-count: 3;
  height: 100px;
  border: 1px solid red;
}
.category-list li {
  page-break-inside: avoid;
  break-inside: avoid;
}
<ul class="category-list clearfix">
  <li class="category-item">1</li>
  <li class="category-item">2</li>
  <li class="category-item">3</li>
  <li class="category-item">4</li>
  <li class="category-item">5</li>
  <li class="category-item">6</li>
  <li class="category-item">7</li>
  <li class="category-item">8</li>
  <li class="category-item">9</li>
  <li class="category-item">10</li>
  <li class="category-item">11</li>
  <li class="category-item">12</li>
</ul>

html

1 个回答

  1. Best Answer

    利用display: flex;

    这是完整的文档： http: //frontender.info/a-guide-to-flexbox/

    .category-list {
  list-style: none;
  height: 100px;
  border: 1px solid red;
  display: flex;
  flex-direction: column; 
  flex-wrap: wrap
}
.category-list li {
  page-break-inside: avoid;
  break-inside: avoid;
}
    <ul class="category-list clearfix">
  <li class="category-item">1</li>
  <li class="category-item">2</li>
  <li class="category-item">3</li>
  <li class="category-item">4</li>
  <li class="category-item">5</li>
  <li class="category-item">6</li>
  <li class="category-item">7</li>
  <li class="category-item">8</li>
  <li class="category-item">9</li>
  <li class="category-item">10</li>
  <li class="category-item">11</li>
  <li class="category-item">12</li>
</ul>

    • 5

相关问题