Смарт-стовпці з CSS3 - html, css, css3

У мене є текст в <pre> це майже робить те, що я хочу column-count і медіа-запити.

http://jsfiddle.net/tbhtrL0f/11/ (змініть розмір області результатів, щоб побачити 1/2/3 стовпців)

Є кілька речей, про які я хотів би змінити, але не знаю, як:

1. Замість того, щоб робити кількість стовпців на основі медіа-запиту, я краще додати новий стовпець, коли для цього достатньо горизонтального простору (без переповнення).
2. Я хотів би переважно розбити де два поверхи підряд.

Є / обидві ці зміни можливі з чистою CSS?

Відповіді:

Ваше перше запитання можна виконати, але другий вимагає певної розмітки.

1. Ви можете встановити ширину стовпчика замість: column-width: 20em (або будь-яка ширина, яка підходить для вашого дизайну). Це означає, що стовпчик буде принаймні таким самим широким (якщо тільки містячий блок ще не набагато вужчий), а нові стовпці будуть додані, якщо потрібно, до тих пір, поки вони підходять до цього мінімального значення. Отже, ніяких медіа запитів не потрібно. Ви могли б також об'єднати column-widthі column-count, що означає, що кількість стовпців - це максимальна кількість дозволених стовпчиків. Нарешті, там є columns скорочення, що дозволяє встановити обидва одночасно: columns: 20em 4;

2. Там є break-before/break-after і break-inside властивості, і вони можуть бути застосовані до елементи в межах макета колонок, але не до пробілів. Я використовую JS для виявлення деяких певних просторів і ін'єкцій, щоб сплеснутися. Крім того, якщо я правильно пам'ятаю, властивості пробілу стовпців не підтримуються, але я не можу знайти посилання на це прямо зараз. .