заполнение столбца: авто;без переполнения высоты div - PullRequest
Новая
       18

заполнение столбца: авто;без переполнения высоты div

0 голосов
/ 05 февраля 2019

У меня есть контейнер в контейнере, внутри которого есть несколько тегов ul, которые должны разбиваться на 4 столбца.Должен заполняться слева направо.В Chrome и всех остальных, даже в Firefox на моем iPad, это работает без установки количества пикселей в свойстве height.Но на моем рабочем столе Firefox содержимое переполняется, когда для высоты установлено значение auto. 

.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 столбца.

1 Ответ

0 голосов
/ 13 февраля 2019

Просто удалите 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>
...