Question

我在一个容器中有一个容器，该容器内部有多个ul标签，应分为4列。应该从左到右填充。在Chrome上以及在iPad上的所有其他firefox上，都可以在高度属性中不设置像素数量的情况下运行。但是在我的桌面Firefox上，当高度设置为自动时，内容会溢出。

.parent {height: 700px;}
.child {column-count: 4;column-fill: auto;height: auto;}
ul {break-inside: avoid; page-break-inside: avoid;}

<div class="parent">
      <div class="child">
        <ul>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
        </ul>
            <ul>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
        </ul>
            <ul>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
        </ul>
            <ul>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
        </ul>
            <ul>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
        </ul>
            <ul>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
        </ul>
            <ul>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
          <li>BLABLABLA</li>
        </ul>
      </div>
    </div>

子容器随后将溢出父容器，并且不会分成4列。

Answer 1

只需删除column-fill: auto;：

（注意：我在第一个margin-top: 0;中添加了ul，以改善整个容器中列的布局/分布）。

.parent {
  height: 700px;
}

.child {
  column-count: 4;
  height: auto;
}

ul {
  break-inside: avoid;
  page-break-inside: avoid;
}

ul:first-of-type {
  margin-top: 0;
}

<div class="parent">
  <div class="child">
    <ul>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
    </ul>
    <ul>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
    </ul>
    <ul>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
    </ul>
    <ul>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
    </ul>
    <ul>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
    </ul>
    <ul>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
    </ul>
    <ul>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
      <li>BLABLABLA</li>
    </ul>
  </div>
</div>

列填充：自动；没有高度溢出div

1 个答案: