Разрыв столбца CSS?

Ответ 1

Вот в чем проблема: ни один столбец не разбивается после "заголовка" в Safari и Firefox:

Согласно this, this и this разрывы столбцов пока не работают.

Ответ 2

Правила разбиения столбцов CSS плохо поддерживаются, но я нашел обходное решение, которое делает что-то достаточно близко. Вместо этого:

 <div class="columns">
    <h1>Heading</h1>
    <p>Paragraph</p>
 </div>

Я пишу это:

 <div class="columns">
    <div class="keeptogether">
       <h1>Heading</h1>
       <p>Paragraph</p>
    </div>
 </div>

Затем CSS выглядит так:

 div.columns {
    column-width: 300px;
    -moz-column-width: 300px;
    -webkit-column-width: 300px;
 }
 div.keeptogether {
    display: inline-block;
    width: 100%;
 }

Здесь вы можете увидеть результаты например.

Ответ 3

Я столкнулся с такой же проблемой и решил ее следующим образом.

Моя основная проблема заключалась не в том, чтобы вставить разрыв после каждого блока "заголовок/абзац", но избегая разрыва столбца внутри блока "заголовок/абзац".

Решение легко:

• Закрепить каждый блок заголовка/абзаца в теге span.

• В CSS добавьте ссылку на тег span со следующим кодом:

  дисплей: встроенный блок; ширина: 100%;

Небольшой недостаток заключается в том, что это может оставить пустые области внизу некоторых столбцов.

В моем случае весь css выглядит следующим образом (div определяет глобальное форматирование потока данных):

div {
    -webkit-column-width: 20em; /* 20em wide */
    -webkit-column-gap: 2em;  /* 2em gap */
    -webkit-column-rule: 1px solid #eee;   /* 1px border between columns */
    -webkit-column-count: 3; /* 3 columns max! */

    -moz-column-width: 20em;
    -moz-column-gap: 2em;
    -moz-column-rule: 1px solid #eee; 
    -moz-column-count: 4;

    -ms-column-width: 20em;
    -ms-column-gap: 2em;
    -ms-column-rule: 1px solid #eee; 
    -ms-column-count: 3;

    column-width: 20em;
    column-gap: 2em;
    column-rule: 1px solid #eee; 
    column-count: 3;

    padding: 5px;
}

.tokeeptogether {
    display: inline-block;
    width: 100%;
}

Ответ 4

Разрывы в столбцах никогда не поддерживались в предыдущих версиях Safari - я думаю, это все еще так. Это довольно странно, что Apple написала, что она поддерживается с 3,0, хотя (документация Safari о перерывах столбца)...

То же самое происходит с Firefox. Chrome - единственный браузер, который поддерживает почти все, если не все, элементы управления столбцами.

Ответ 5

break-after: 

неверно, должно быть:

column-break-after

также никто не упомянул эти свойства:

-webkit-column-span: all;
-moz-column-span: all;
column-span: all;

которые звучат так, как будто они могут быть полезны здесь

изменить: Кроме того, следует отметить, что поддержка столбцов теперь довольно приличная на самом деле, хотя и с использованием префиксов поставщиков.

column-fill

по-прежнему не поддерживается большинством браузеров, но AFAIK большинство других свойств

Ответ 6

Кажется, что h1 в образце достаточно велик, чтобы всегда вызвать разрыв после него, если вы сократите его до "Голова", эффект break-after имеет эффект.

Ответ 7

Если я не ошибаюсь, вы хотите, чтобы заголовок проходил через все столбцы и позволял разделить только следующие братья, право?
Я боюсь, что разрывы колонны все еще не работают так, как предполагалось, поэтому - это может быть не самое "ортодоксальное" решение, но спасло меня - я исправил это с помощью какого-то напуганного стиля:

Основной HTML:

<div class="container">
  <h1>Header</h1>
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <p>Third paragraph</p>
</div>

Основной CSS:

.container{
  column-count:3; /* Add necessary prefixes */
  padding-top:2em;
  position:relative;
}
.h1{
  position:absolute;
  top:0;
}

Абсолютное позиционирование освобождает этот элемент от потока столбцов и, кажется, работает очень хорошо.

P.S.: просто заметил, что сообщение довольно старое... ну, я надеюсь, что это поможет кому-то другому, поддержка этих свойств CSS не улучшила , что много