CSS многоколоночный избежать перерывов - PullRequest
Новая
       11

CSS многоколоночный избежать перерывов

0 голосов
/ 23 ноября 2018

Я пытаюсь создать многостолбцовый макет с помощью css, где у меня есть несколько элементов с заголовками между ними.Я пытался использовать break-after: avoid, чтобы предотвратить попадание заголовков внизу столбца, но, похоже, он не работает

Вот фрагмент, который показывает мою проблему: 

.columns-3 {
  column-count: 3;
}

.column-heading {
  font-weight: bold;
  break-after: avoid-column;
}
<div class="columns-3">
  <div class="column-heading">
    Heading
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-heading">
    Heading
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
</div>

Я также попытался использовать avoid-column вместо avoid или избежать разрыва элемента после заголовка с помощью 

.column-heading + .column-item {
  break-before: avoid;
}

Это ошибка или я неправильно понимаю эти свойства?
Есть ли другой способ сделать это только с помощью css или мне нужно сделать это в коде JS / Server?

1 Ответ

0 голосов
/ 23 ноября 2018

Попробуйте это: 

    .columns-3 {
      column-count: 3;
    }

    .column-heading {
      font-weight: bold;
      break-after: avoid-column;
    }
<div class="columns-3">
  <div class="column-heading">
    Heading
  </div>
  <div class="column-heading">
    Heading
  </div>
</div>
<div class="columns-3">
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
  <div class="column-item">
    item
  </div>
</div>
...