Макет W3.CSS
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Классы компоновки W3.CSS
W3.CSS версии 2.90/2.91 представила следующие классы для «столбцового» макета:
| Класс | Описание |
|---|---|
| w3-cell-row | Контейнер для ячеек (столбцов). |
| w3-ячейка | Ячейка макета (столбец). |
| w3-cell-top | Выравнивает содержимое по верху ячейки (столбца). |
| w3-cell-средний | Выравнивает содержимое по вертикальной середине ячейки (столбца). |
| w3-cell-bottom | Выравнивает содержимое по нижнему краю ячейки (столбца). |
| w3-мобильный | Добавляет в ячейку (столбец) адаптивность для мобильных устройств. Отображает элементы в виде блочных элементов на мобильных устройствах. |
Классы макета заменяют устаревшие классы макета.
Новый классировщик макетов более универсален и прост в использовании.
Устаревшие классы макетов перечислены внизу этой страницы.
Элементы блока HTML
Изначально блочные элементы HTML (например, элементы <div>) отображаются как вертикальные блоки:
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Пример
<div class="w3-container w3-red">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green">
<p>Hello W3.CSS Layout.</p>
</div>
Ячейки макета
Класс w3-cell переопределяет блочные элементы для горизонтального отображения (как ячейки таблицы):
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Пример
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
Контейнер макета
w3 - cell-row — это контейнер для ячеек (столбцов).
Ширина контейнера w3-cell-row определяет общую ширину всех содержащихся в нем ячеек.
Ширина по умолчанию равна 100%:
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Пример
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Если вы измените ширину контейнера ячеек, это уменьшит общую ширину содержащихся ячеек:
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Пример
<div class="w3-cell-row"
style="width:75%">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Ячейки макета самонастраиваются
Класс w3-cell имеет очень хороший встроенный самонастраивающийся стандарт. Бок о бок элементы автоматически подстроятся под необходимую ширину:
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS. Здравствуйте, макет W3.CSS.
Пример
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout. Hello W3.CSS Layout.</p>
</div>
Ячейки макета настраиваются на одинаковую высоту
Расположенные рядом элементы w3-cell также автоматически настраиваются на одинаковую высоту:
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Пример
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
Адаптивный макет
Класс w3-mobile добавляет любому HTML-элементу адаптивность для мобильных устройств.
При использовании вместе с w3-cell он будет отображать столбцы макета вертикально на маленьких экранах/мобильных телефонах и горизонтально на средних/больших экранах.
На средних и больших экранах:
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
На маленьких экранах:
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Пример
<div class="w3-container w3-red
w3-cell w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div
class="w3-container w3-blue w3-cell w3-mobile">
<p>Hello
W3.CSS Layout.</p>
</div>
Простое выравнивание
Класс w3-cell позволяет очень легко выравнивать текст.
Существует 3 различных класса выравнивания:
- w3-cell-top (по умолчанию)
- w3-cell-средний
- w3-cell-bottom
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Пример
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
Класс w3-cell-row растягивает элементы по ширине страницы:
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Здравствуйте, макет W3.CSS.
Пример
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
Устаревшие классы компоновки таблиц W3.CSS
| w3-макет-контейнер | Вместо этого используйте w3-cell-row. |
| w3-макет-строка | |
| w3-макет-ячейка | Вместо этого используйте w3-cell. |
| w3-макет-верх | Вместо этого используйте w3-cell-top. |
| w3-макет-средний | Вместо этого используйте w3-cell-middle. |
| w3-макет-снизу | Вместо этого используйте w3-cell-bottom. |
| w3-макет-столбец | Вместо этого используйте w3-mobile. |
Устаревшие классы будут удалены из W3.CSS в версии 4.0.