W3.CSS Макет

W3.CSS Классы макета

В W3.CSS версии 2.90 / 2.91 введены следующие классы для "column-like" ("столбчатого") макета:

HTML Блочные элементы

Первоначально блочные HTML элементы (например элементы <div>) отображаются в виде вертикальных блоков:

Ячейки макета

Класс w3-cell переопределяет блочные элементы для горизонтального отображения (например, ячейки таблицы):

Контейнер макета

w3-cell-row - это контейнер для ячеек (столбцов).

Ширина контейнера w3-cell-row определяет общую ширину всех содержащихся ячеек.

По умолчанию ширина составляет 100%:

Если вы измените ширину контейнера ячеек, это уменьшит общую ширину содержащихся ячеек:

Ячейки макета являются саморегулирующимися

Класс w3-cell имеет очень хороший встроенный самонастраивающийся стандарт. Элементы рядом друг с другом автоматически подгоняются под необходимую ширину:

Ячейки макета приспосабливаются к равной высоте

Расположенные друг возле друга w3-cell элементы также автоматически настраиваются на равную высоту:

Адаптивный (отзывчивый) макет

Класс w3-mobile добавляет адаптивность любых HTML єлементов в первую очередь для мобильных устройств.

При использовании вместе с w3-cell он будет отображать макеты столбцов вертикально на маленьких экранах/мобильных телефонах и горизонтально на средних/больших экранах.

Простое выравнивание

Класс w3-cell позволяет очень легко выровнять текст.

Есть 3 разных класса выравнивания:

• w3-cell-top (по умолчанию)
• w3-cell-middle
• w3-cell-bottom

Класс w3-cell-row растягивает элементы по ширине страницы:

Устаревшие классы макета каскадной таблицы стилей W3.CSS