Crossbrowser columns examples

CSS float property

Пелевин, «Generation П»:

Лем, «Сказки роботов», цикл рассказов:

Лем, «Рассказы о пилоте Пирксе»:

Без ol/ul и атрибута start, зато с css-счётчиками. Правая колонка с float items по 50% oт ширины. В идеале должна быть сквозная нумерация, а не два списка, начинающихся с единицы.

CSS columns property

Кларк, «Сказки «Белого оленя»»:

1. Тише, пожалуйста
2. Охота на крупную дичь
3. Патентная заявка
4. Гонка вооружений
5. Критическая масса
6. Идеальная мелодия
7. Пацифист
8. Соседи
9. Движущая сила
10. Человек, который вспахал море
11. Трусливая орхидея
12. Холодная война
13. Что взлетает вверх...
14. Спящий красавец
15. Дефенестрация Эрминтруды Инч
16. Луч смерти

В ie11 в верхнем варианте проблема: не отображается нумерация со второй колонки. Потому используем нижний вариант, с установкой счётчика вручную.

1. Тише, пожалуйста
2. Охота на крупную дичь
3. Патентная заявка
4. Гонка вооружений
5. Критическая масса
6. Идеальная мелодия
7. Пацифист
8. Соседи
9. Движущая сила
10. Человек, который вспахал море
11. Трусливая орхидея
12. Холодная война
13. Что взлетает вверх...
14. Спящий красавец
15. Дефенестрация Эрминтруды Инч
16. Луч смерти

CSS flex property

Вариант с четырьмя ol и использованием атрибута start.

Пелевин, «Жизнь насекомых»:

Правая колонка подразбита с помощью CSS columns

Лем, «Рассказы о пилоте Пирксе»:

• Tales of Pirx the Pilot
  • The Test
  • The Conditioned Reflex
  • On Patrol
  • The Albatross
  • Terminus
• More Tales of Pirx the Pilot
  • The Hunt
  • The Accident
  • Pirx's Tale
  • The Inquest
  • Ananke
• Fiasco (novel)
  1. Birnam Wood
  2. The Council
  3. The Survivor
  4. Seti
  5. Beta Harpyiae
  6. Quinta
  7. Hunting
  8. The Moon
  9. An Annunciation
  10. The Attack
  11. Show of Strength
  12. Paroxysm
  13. A Cosmic Eschatology
  14. Cartoons
  15. Sodom and Gomorrah
  16. The Quintans

CSS grid property

Кларк, циклы произведений: