Многоколоночная верстка текста в CSS

Многоколоночная верстка на HTML и CSS

Верстка в несколько колонок при помощи свойства float

Здесь мы организовали 2-х колоночную верстку. Прием заключается в том, что мы использовали два блочных элемента (абзаца), которые сделали плавающими при помощи свойства float (см. код таблицы стилей). Но дело в том, что плавающие элементы выпадают из общего потока и поэтому не влияют на высоту родительских элементов, что приводит к наползанию контента друг на друга и проблемам при расчете высот. Чтобы обойти такие неприятные моменты, мы поместили наши блоки, которые служат колонками, в блок-обертку и добавили после них дополнительный пустой блок-подпорку, которому запретили обтекание плавающих вверху элементов. В результате такого приема блок-подпорка займет всю доступную ширину блока-обертки, не имея при этом высоты, и будет располагаться под самой высокой колонкой, подгоняя тем самым и высоту блока-обертки.

Внешне будет складываться впечатление, что наши плавающие элементы никуда и не выпадали, а остались в потоке документа. Для колонок внутри блока-обертки мы использовали одинаковую ширину и оформление (хотя ширина может быть разной). Однако, если убрать границы, то можно легко реализовать верстку в две и более колонок.

Кстати, данный прием мы использовали для верстки нашего сайта стишков с черным юмором. Левая колонка представляет собой боковое меню сайта, а правая служит блоком содержания для самих стишков. Полистайте сайт и обратите внимание на то, что в независимости от того, какая колонка выше, складывается впечатление, что колонки одинаковые по высоте. Это достигается фоном их блока обертки, который имеет разные цвета, соответствующие фонам колонок, а также наличием блока-подпорки, который подстраивает высоту блока-обертки под высоту наибольшей из колонок.

Верстка колонок при помощи модели CSS Flexbox

Здесь мы организовали 2-х колоночную верстку при помощи флексов. Прием заключается в том, что мы использовали флекс-кон­тейнер, в который и поместили два наших div'а, которые играют роль флекс-элементов со всеми вытекаю­щими из этого последст­виями.

Т.к. колонки у нас получи­лись узкие (кстати, устано­вите для нагляд­ности колонкам границу, сняв комменти­рование в таблице стилей), мы исполь­зовали в длинных словах мягке переносы (заодно вспом­нили про мнемоники).

Не забудьте загля­нуть в учебник и вспомнить материал по флексам. Затем обяза­тельно поэкспе­рименти­руйте с данными колонками, изменяя свойства флекс-кон­тейнера и его флекс-элементов.

Согла­ситесь, круто получи­лось, добавили всего одну пару строчек в таблицу стилей и даже убрали в исходном коде лишний блок-обертку.

Верстка колонок при помощи css-свойств группы columns

Здесь мы организовали 2-х колоноч­ную верстку при помощи специально предназна­ченных для этого css-свойств column-count и column-gap. Мы просто указали требуемое количество колонок для нашего абзаца и все. При желании мы могли бы применить к колонкам и некоторое форма­тирова­ние: установка раздели­тельной линии, порядок заполнения колонок, расстояние между колонками и т.д. Подробнее о многоколоночной верстке смотрите в нашем учебнике здесь.