Column-count, почему строка перемещается в следующий столбец, хотя есть место?CSS

Разбираемся в CSS
Ответить
Anonymous
 Column-count, почему строка перемещается в следующий столбец, хотя есть место?

Сообщение Anonymous »

Я создаю интерфейс чтения, похожий на книгу, используя свойство columns-count для разделения страниц. К сожалению, иногда на определенной высоте количество строк в одном столбце отличается от количества строк в соседнем столбце, и это выглядит не очень красиво. См. снимок экрана ниже.
На снимке экрана показано, как выглядит эта проблема. Нижняя строка второго столбца почему-то переместилась в соседний столбец, хотя места для строки достаточно.
В Firefox мне кажется все нормально, а в Chrome и Edge нет.
Пример кода очень простой:
https://jsfiddle.net/352wgfhe/1/

Код: Выделить всё


Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.


Надеюсь, мне что-нибудь поможет.

Подробнее здесь: https://stackoverflow.com/questions/798 ... h-there-is
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»