Crossbrowser columns examples

Стандартные отступы срегулированы вровень с text-indent параграфов. Примеры с активным применением БЭМ-миксования.

CSS float property

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

  1. Поколение «П»
  2. Драфт Подиум
  3. Тихамат-2
  4. Три загадки Иштар
  5. Бедные люди
  1. Путь к себе
  2. Homo Zapiens
  3. Тихая Гавань
  4. Вавилонская марка
  5. Вовчик Малой
  1. Институт пчеловодства
  2. Облако в штанах
  3. Исламский фактор
  4. Критические дни
  5. Золотая комната
  6. Туборг Мэн

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

  • Как Эрг Самовозбудитель бледнотика победил
  • Три электрыцаря
  • Урановые уши
  • Большая трёпка
  • Белая смерть
  • Как Микромил и Гигациан стали причиной туманности
  • Как был спасён мир
  • Друг Автоматея
  • Машина Трурля
  • Сказка о счётной машине, которая с драконом воевала
  • Два чудовища
  • Сокровища короля Бискаляра
  • Советники короля Гидропса
  • Король Глобарес и мудрецы
  • Сказка о короле Мурдасе

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

Без 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.

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

  1. Русский лес
  2. Инициация
  3. Жить чтобы выжить
  4. Стремленье мотылька к огню
  1. Третий Рим
  2. Жизнь за царя
  3. Памяти Марка Аврелия
  4. Убийство насекомого
  1. Черный всадник
  2. Полёт над гнездом врага
  3. Колодец
  4. Paradise
  1. Три чувства молодой матери
  2. Второй мир
  3. Энтомопилог

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

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

CSS grid property

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

Космическая одиссея

2001: Космическая одиссея

2010: Одиссея Два

2061: Одиссея Три

3001: Последняя Одиссея

По ту сторону неба

Специальный груз

Пернатый друг

Сделайте глубокий вдох

Космическая свобода

Случайная встреча

Зов звёзд

Бросок на луну

Стартовая линия

Робин Гуд, член Королевского Общества

Зелёные пальцы

Весь этот блеск

Следите за космосом

Вопрос пребывания

<table cellspacing=0 cellpadding=7 border=7 align=left width=auto> ;))
Кларк, циклы произведений
По ту сторону неба Космическая одиссея Приход ночи Рама
  • Специальный груз
  • Пернатый друг
  • Сделайте глубокий вдох
  • Космическая свобода
  • Случайная встреча
  • Зов звёзд
  1. 2001: Космическая одиссея
  2. 2010: Одиссея Два
  3. 2061: Одиссея Три
  4. 3001: Последняя Одиссея
  • Да не настанет ночь
  • Город и звёзды
  • По ту сторону ночи
  • Свидание с Рамой
  • Рама II
  • Сад Рамы
  • Рама явленный