时间戳

首页 > 解决方案 > 列出项目，第一列有 6 个项目

html - 列出项目，第一列有 6 个项目

问题描述

我已将列表分成两列。按照设计，第一列必须是 6 项。如何设置它以便将 6 个项目放置在第一列中，并将所有剩余的项目放置在其他列中？现在内容平均分配。

ul {
  columns: 2;
  column-count: 2;
  height: 800px;
  li {
    list-style-type: none;
    padding: 1.25em 0 1.25em 50px;
    font: 20px/24px "PT Root UI";
    color: #272727;
    mix-blend-mode: normal;
    opacity: 0.8;
    display: inline-block;
  }
}
<ul className="about-company-list">
  <li>
    Успешно развивается, создаёт тысячи рабочих мест, оказывает значительное влияние на развитие экономики Казахстана.

  </li>
  <li>
    Строит жилье всех уровней комфортности.
  </li>
  <li>
    Развивает строительство за пределами Казахстана
  </li>

  <li>
    Реализует проекты повышенной сложности для международных
  </li>

  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
</ul>

标签： htmlcss

解决方案

在现代浏览器中，最简单的方法是使用display: grid, 六行两列；将网格设置为首先填充行（因此它们在第一列中从上到下流动，然后在第二列的第一行中恢复）：

ul {
  /* using CSS Grid Layout: */
  display: grid;

  /* defining the number of columns and rows; here we use
     the repeat() function to create 2 columns, each column
     of one fractional unit ('fr') of the available space
     and six rows, each of one fractional unit of the available
     space: */
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, 1fr);

  /* forcing the grid to place items automatically into the rows
     rather than the columns: */
  grid-auto-flow: rows;
}

li {
  list-style-type: none;
  padding: 1.25em 0 1.25em 50px;
  font: 20px/24px "PT Root UI";
  color: #272727;
  mix-blend-mode: normal;
  opacity: 0.8;
  display: inline-block;
}
<ul className="about-company-list">
  <li>
    Успешно развивается, создаёт тысячи рабочих мест, оказывает значительное влияние на развитие экономики Казахстана.

  </li>
  <li>
    Строит жилье всех уровней комфортности.
  </li>
  <li>
    Развивает строительство за пределами Казахстана
  </li>

  <li>
    Реализует проекты повышенной сложности для международных
  </li>

  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
  <li>
    Участвует в масштабных государственных программах в сфере строительства
  </li>
</ul>

参考：

参考书目：

推荐阅读