Интерактивный пример

Являясь «чистым» контейнером, элемент , по существу, не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя атрибуты class или id , помечать раздел документа, написанный на разных языках (используя атрибут lang ), и так далее.

Атрибуты

К этому элементу применимы глобальные атрибуты.

Примечание: Атрибут align устарел и вышел из употребления; не используйте его больше. Вместо этого, вам следует использовать свойства CSS или методы, такие как CSS Grid или CSS Flexbox для выравнивания и изменения положения элементов на странице.

Примечание

• Элемент следует использовать только в том случае, если никакой другой семантический элемент (такой как или ) не подходит.

Примеры

Простой пример

div> p>Любой тип контента. Например, <p>, <table>. Все что угодно!p> div> 

Результат будет выглядеть так:

Стилизованный пример

Этот пример создаёт прямоугольник с тенью, применяя стили к с помощью CSS. Заметьте, что использование атрибута class на элементе даёт применение стилей «shadowbox» (в дословном переводе означает «теневая коробка») к элементу.

HTML

div class="shadowbox"> p>Вот очень интересная заметка в прекрасном прямоугольнике с тенью.p> div> 

CSS

.shadowbox  width: 15em; border: 1px solid #333; box-shadow: 8px 8px 5px #444; padding: 8px 12px; background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); > 

Результат

Спецификации

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

• Семантические секционные элементы: , , , ,
• Элемент для стилизации фразового контента.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

.container больше не нужен

Все верстальщики в своих проектах используют div.container для центрирования контента и этот способ имеет некоторые особенности, от которых можно избавиться. Прочитав эту статью, Вы узнаете про способ, который позволит полностью отказаться от контейнера. Я попытаюсь рассказать о плюсах и минусах использования контейнера и альтернативного способа центрирования контента средствами только лишь css.

P.S. Надеюсь качество GIF’ок позволяет что-то разглядеть.

1. Немного о стандартном .container
2. Минусы .container
3. Работа с .container и медиа-запросами
4. Замена .container одним css-свойством
5. Комбинация с медиа-запросами
6. Пример из реальной практики, сравнение методов
7. Рекомендации
8. Заключение

.container

Немного о стандартном .container

Изображение выше и код наглядно показывают как работает стандартный контейнер в типовой вёрстке сайта. Наверное все знают, что обычно создается тег section, в него помещается div.container и уже в него помещают различный контент. Он занимает всю ширину экрана, например, до 1170px и когда экран становится больше, то играет роль обёртки и фиксирует контент в центре страницы, не давая ему «разбежаться» в стороны.

Так почему бы сразу не задать эти стили для контента? Если задать эти стили для секции без контейнера, то вроде бы всё смотрится нормально.

 
Заголовок страницы
 
Lorem ipsum dolor.
 
.
 
 

Но как только требуется задать фон для секции, ситуация сразу выходит из под контроля:

Если задать для секции фон, внутрь секции положить контейнер с его стилями, а в него уже контент, то всё заработает так, как надо:

 
 
Заголовок страницы
 
Lorem ipsum dolor.
 
.
 
 
 

Минусы .container

Самый очевидный минус контейнера — создание лишних блоков в разметке, которое ведет к увеличению цепочки вложенностей элементов и понижению читаемости кода.

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

Выше мы рассмотрели самый простой пример. Но если на сайте 15 секций или больше? Это 15 лишних блоков. А если нам внутри контейнера нужно разделить секцию еще на две части и сделать их flex-элементами? Нужно создать div-обёртку, это еще по одному блоку в контейнер. И уже +2 лишних блока на секцию! Как я уже сказал выше — эти div’ные вложенности «мусорят» в разметке. Но возможности css позволяют нам обойтись и без них.

Работа с .container и медиа-запросами

Я не так давно в веб-разработке, но уже нашел способ адекватно работать с контейнером и в итоге вообще избавился от него. Я так понимаю .container «родился» в bootstrap и теперь его используют абсолютно везде.

Взяв за основу сетку bootstrap можно значительно упростить себе работу с css медиа-запросами, используя следующий код:

.container < padding: 0 15px; >@media (min-width: 575.98px) < .container < max-width: 540px; margin: auto; padding: 0; >> @media (min-width: 767.98px) < .container < max-width: 720px; >> @media (min-width: 991.98px) < .container < max-width: 960px; >> @media (min-width: 1199.98px) < .container < max-width: 1140px; >> 

Что он делает? Если кратко, то держит контент всегда в центре и меняет его размеры на разных экранах:

1. На экранах до 576px контент растягивается, но боковые отступы в 15px сохраняются.
2. На экранах от 576px до 768px контент находится в центре и его ширина 540px.
3. На экранах от 768px до 992px контент в центре и его ширина 720px.
4. На экранах от 992px до 1200px контент в центре и его ширина 960px.
5. На экранах от 1200px контент в центре с шириной 1140px.

1. У нас есть 4 четких медиа-запроса: для больших экранов, для средних экранов, для маленьких экранов, для планшетов.
2. имеем всего один небольшой промежуток от 320px до 576px, который нужно адаптировать как бы «вручную» — уменьшая по 1px ширины контента.

На рисунке ниже изображена работа .container в связке с медиа-запросами, которые я подсмотрел у bootstrap.

Замена .container одним css-свойством

Наконец-то мы подошли к самому интересному. Так как же заменить .container? Для начала разберемся что нам нужно сделать. Нам нужно две вещи:

1. Чтобы контент был фиксированной ширины, например 1180px и не разбегался в стороны.
2. Чтобы при этом можно было задать цвет или фон для всей секции.

Допустим нам нужна ширина контента 1180px, значит 1920 — 1180 = 740 / 2 = 370px — будут боковые отступы в нашей секции. Смотрим:

 
 
content
 
 

section

Да уж. При уменьшении экрана, наши отступы сжимают контент. Не годится. Может возможно сделать отступы динамическими? Возможно! И ресурсами одного лишь css!

Для этого воспользуемся функцией calc(). На данный момент css-функция calc() поддерживается на 96.5%, что всего на 1% меньше, чем flexbox, а это значит, что её можно смело использовать. Для динамических внутренних отступов нужно выполнить одну математическую операцию.

Давайте уже скорее посмотрим на пример:

Мне нравится! Без всяких дополнительных блоков наша секция ведёт себя ровно так же, как с .container. С уменьшением экрана уменьшаются padding, а контент остается фиксированным по ширине. И это всего лишь одно css-свойство:

section

UPD: Упросил формулу. Спасибо Metotron0.
Таким образом мы задаём боковые внутренние отступы с помощью функции calc(), которая при любом разрешении экрана высчитывает эти отступы так, чтобы контент был 1180px! Вы только попробуйте.

Можно поиграться с корректирующим значением 590px и сделать контент 1140px или 1170px, как угодно!

Посмотрите сравнение этого метода с контейнером прямо сейчас!

Комбинация с медиа-запросами

Было бы очень хорошо встроить это в сетку от bootstrap, чтобы легче было адаптировать сайт.

section < padding: 0 15px; >@media (min-width: 575.98px) < section < padding: 0 calc(50% - 270px); >> @media (min-width: 767.98px) < section < padding: 0 calc(50% - 360px); >> @media (min-width: 991.98px) < section < padding: 0 calc(50% - 480px); >> @media (min-width: 1199.98px) < section < padding: 0 calc(50% - 590px); >> 

Итого на разных размерах экранов мы имеем:

1. от 320px до 576px авто ширину контента и фиксированные отступы 15px.
2. от 576px до 768px ширину 540px и динамические отступы.
3. от 768px до 992px ширину 720px и динамические отступы.
4. от 992px до 1200px ширину 960px и динамические отступы.
5. от 1200px ширину 1180px и динамические отступы.

Пример из реальной практики, сравнение методов

Всё еще не видите пользы от метода с динамическими отступами? Тогда давайте взглянем на пример из реальной практики. Надевайте очки разработчика — есть следующая секция (кликабельно):

Какие мысли? Есть секция, в ней два отдельных блока, чтобы разбросать их по сторонам, хорошо бы задать для секции display: flex и jcsb. Но если использовать .container, то придётся оборачивать два этих блока в ещё один и ему уже задавать df. Разве это удобно? Пробуем:

.brif-section < background: background; >.container < max-width: 1180px; margin: auto; >.brif-wrapper

А теперь посмотрите как это выглядит если использовать динамические отступы:

.brif-section

Только посмотрите как уменьшился код, он стал чище, читать его стало легче. Получилась секция, которая содержит блок с текстом и форму — ничего лишнего! И это всего лишь одна секция. Повторюсь: а если на сайте 15 секций?

Итак, начинаем подводить итоги:

• Контент зафиксирован в центре и имеет нужную ширину.
• Можно задать нужный фон для всей секции.

• Он является дополнительным div.
• Иногда нужно создавать еще один дополнительный div.
• Код «раздувается» и труднее читается.
• Иногда нужно задавать фон для секции, а другие стили для блока-обёртки.
• Нужно придумывать какой-то класс для блока-обёртки.

• Контент зафиксирован в центре и имеет нужную ширину.
• Можно задать нужный фон для всей секции.
• Нет дополнительных блоков, обёрток.
• Код чище и легче читается.
• Все нужные стили задаются только для секции.

• Нужно для секций задавать padding-top и padding-bottom отдельными свойствами.

section

section

Иначе они перезапишут динамические отступы.

Рекомендации

Мне нравится метод с динамическими внутренними отступами. Попробуйте его вместо привычной «контейнерной» вёрстки и вы быстро заметите как повысилась чистота вашего кода. Если есть какие-то сомнения в этом методе, то пишите их в комментарии — обсудим!

Рекомендую использовать не %, а vw. Чтобы ширина считалась не от родителя, а от ширины области промотора браузера. Так просто надёжнее. Поддержка vw — 96% тут.

section

Создайте свой шаблон этих стилей с медиа-запросами, например:

section, header, footer < padding: 0 15px; >@media (min-width: 575.98px) < section, header, footer < padding: 0 calc(50vw - 270px); >> @media (min-width: 767.98px) < section, header, footer < padding: 0 calc(50vw - 360px); >> @media (min-width: 991.98px) < section, header, footer < padding: 0 calc(50vw - 480px); >> @media (min-width: 1199.98px) < section, header, footer < padding: 0 calc(50vw - 590px); >> 

Заключение

Метод с динамическими отступами выполняет ту же функцию, что и div.container, но полностью лишён всех его недостатков. Возможно этот метод имеет какие-то подводные камни, но я пока их не встретил. Пока всё работает абсолютно так же, как с контейнером.

Не бойтесь чего-то нового. Просто начните применять этот метод и в скором времени вы почувствуете некоторое облегчение. Используйте css на полную катушку!

P.S. Если во время использования этого метода всплывут какие-то подводные камни — опишите их в комментариях! Будем разбираться.

Компонент Контейнер Container

Компонент «Контейнер» позволяет выравнивать и центрировать содержимое страницы. Обычно в контейнер обернут основной контент сайта.

Применение

Основы. Использование

Добавьте класс .uk-container к элементу блока, чтобы придать ему максимальную ширину (по умолчанию max-width: 1200px ). Элемент будет отцентрирован и будет иметь боковые внутренние отступы, которые автоматически адаптируются для больших экранов. Обычно в контейнер оборачивают основной контент сайта.

Модификатор «Размер»

Добавьте один из следующих классов в контейнер, чтобы применить необходимую максимальную ширину.

Колонки

Узнайте, как изменять колонки с помощью нескольких опций для выравнивания, упорядочивания и смещения благодаря нашей системе сеток flexbox. Кроме того, узнайте, как использовать классы колонок для управления шириной элементов без сетки.

На этой странице

Внимание! Обязательно прочтите страницу Сетка, прежде чем погрузиться в то, как изменять и настраивать колонки сетки.

Как они работают

• Колонки основаны на архитектуре Flexbox сетки. Flexbox означает, что у нас есть возможности для изменения отдельных колонок и модификации групп колонок на уровне строки. Вы выбираете, как колонки увеличиваются, уменьшаются или изменяются иным образом.
• При построении макетов сетки весь контент размещается в колонках. Иерархия сетки Bootstrap идет от контейнера до строки к колонки Вашего содержимого. В редких случаях Вы можете комбинировать контент и колонку, но имейте в виду, что это может иметь непредвиденные последствия.
• Bootstrap включает предопределенные классы для создания быстрых и отзывчивых макетов. Благодаря шести контрольным точкам и дюжине колонок на каждом уровне сетки у нас есть десятки классов уже построен для Вас, чтобы создавать желаемые макеты. При желании это можно отключить через Sass.

Выравнивание

Используйте утилиты выравнивания flexbox для вертикального и горизонтального выравнивания колонок.

Вертикальное выравнивание

Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок

div class="container"> div class="row align-items-start"> div class="col"> Одна из трех колонок div> div class="col"> Одна из трех колонок div> div class="col"> Одна из трех колонок div> div> div class="row align-items-center"> div class="col"> Одна из трех колонок div> div class="col"> Одна из трех колонок div> div class="col"> Одна из трех колонок div> div> div class="row align-items-end"> div class="col"> Одна из трех колонок div> div class="col"> Одна из трех колонок div> div class="col"> Одна из трех колонок div> div> div>

Одна из трех колонок
Одна из трех колонок
Одна из трех колонок

div class="container"> div class="row"> div class="col align-self-start"> Одна из трех колонок div> div class="col align-self-center"> Одна из трех колонок div> div class="col align-self-end"> Одна из трех колонок div> div> div>

Горизонтальное выравнивание

Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок

div class="container"> div class="row justify-content-start"> div class="col-4"> Одна из двух колонок div> div class="col-4"> Одна из двух колонок div> div> div class="row justify-content-center"> div class="col-4"> Одна из двух колонок div> div class="col-4"> Одна из двух колонок div> div> div class="row justify-content-end"> div class="col-4"> Одна из двух колонок div> div class="col-4"> Одна из двух колонок div> div> div class="row justify-content-around"> div class="col-4"> Одна из двух колонок div> div class="col-4"> Одна из двух колонок div> div> div class="row justify-content-between"> div class="col-4"> Одна из двух колонок div> div class="col-4"> Одна из двух колонок div> div> div class="row justify-content-evenly"> div class="col-4"> Одна из двух колонок div> div class="col-4"> Одна из двух колонок div> div> div>

Обертывание колонок

Если в одной строке помещается более 12 колонок, каждая группа дополнительных колонок, как одно целое, переносится на новую строку.

.col-4
Поскольку 9 + 4 = 13 > 12, этот div шириной в 4 колонки переносится на новую строку как один непрерывный блок.

.col-6
Последующие колонки продолжаются вдоль новой строки.

div class="container"> div class="row"> div class="col-9">.col-9div> div class="col-4">.col-4br>Поскольку 9 + 4 = 13 > 12, этот div шириной в 4 колонки переносится на новую строку как один непрерывный блок.div> div class="col-6">.col-6br>Последующие колонки продолжаются вдоль новой строки.div> div> div>

Разрывы колонок

Разбиение колонок на новую строку в flexbox требует небольшого хака: добавьте элемент с width: 100% везде, где Вы хотите перенести колонки на новую строку. Обычно это достигается с помощью нескольких .row , но не каждый метод реализации может это учитывать.

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3

div class="container"> div class="row"> div class="col-6 col-sm-3">.col-6 .col-sm-3div> div class="col-6 col-sm-3">.col-6 .col-sm-3div> div class="w-100">div> div class="col-6 col-sm-3">.col-6 .col-sm-3div> div class="col-6 col-sm-3">.col-6 .col-sm-3div> div> div>

Вы также можете применить этот разрыв в определенных контрольных точках с помощью наших утилит для адаптивного отображения.

.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

div class="container"> div class="row"> div class="col-6 col-sm-4">.col-6 .col-sm-4div> div class="col-6 col-sm-4">.col-6 .col-sm-4div> div class="w-100 d-none d-md-block">div> div class="col-6 col-sm-4">.col-6 .col-sm-4div> div class="col-6 col-sm-4">.col-6 .col-sm-4div> div> div>

Изменение порядка

Класса порядка

Используйте классы .order- для управления визуальным порядком Вашего контента. Эти классы отзывчивы, поэтому Вы можете установить order по контрольной точке (например, .order-1.order-md-2 ). Включает поддержку от 1 до 5 на всех шести уровнях сетки.

Первый в DOM, порядок не применяется
Второй в DOM, с наибольшим порядком
Третий в DOM, с 1 порядком

div class="container"> div class="row"> div class="col"> Первый в DOM, порядок не применяется div> div class="col order-5"> Второй в DOM, с наибольшим порядком div> div class="col order-1"> Третий в DOM, с 1 порядком div> div> div>

Существуют также адаптивные классы .order-first и .order-last , которые изменяют order элемента, применяя order: -1 и order: 6 соответственно. Эти классы также могут быть при необходимости смешаны с пронумерованными классами .order-* .

Первый в DOM, порядок последнего
Второй в DOM, без порядка
Третий в DOM, порядок первого

div class="container"> div class="row"> div class="col order-last"> Первый в DOM, порядок последнего div> div class="col"> Второй в DOM, без порядка div> div class="col order-first"> Третий в DOM, порядок первого div> div> div>

Смещение колонок

Вы можете смещать колонки сетки двумя способами: нашими адаптивными классами сетки .offset- и нашими утилитами полей. Классы сетки имеют размер, соответствующий колонкам, в то время как поля более полезны для быстрых макетов, где ширина смещения является переменной.

Классы смещения

Переместите колонки вправо, используя классы .offset-md-* . Эти классы увеличивают левое поле колонки на колонки * . Например, .offset-md-4 перемещает .col-md-4 на четыре колонки.

.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3

div class="container"> div class="row"> div class="col-md-4">.col-md-4div> div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4div> div> div class="row"> div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3div> div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3div> div> div class="row"> div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3div> div> div>

В дополнение к очистке колонки в адаптивных контрольных точках Вам может потребоваться сбросить смещения. См. это в действии в пример сетки.

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

div class="container"> div class="row"> div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6div> div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0div> div> div class="row"> div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6div> div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0div> div> div>

Утилиты полей

С переходом на flexbox в v4 Вы можете использовать утилиты полей, такие как .me-auto , чтобы отодвинуть одноуровневые столбцы друг от друга.

.col-md-4 .ms-auto
.col-md-3 .ms-md-auto
.col-md-3 .ms-md-auto
.col-auto .me-auto

div class="container"> div class="row"> div class="col-md-4">.col-md-4div> div class="col-md-4 ms-auto">.col-md-4 .ms-autodiv> div> div class="row"> div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-autodiv> div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-autodiv> div> div class="row"> div class="col-auto me-auto">.col-auto .me-autodiv> div class="col-auto">.col-autodiv> div> div>

Автономные классы колонок

Классы .col-* также могут использоваться вне .row , чтобы дать элементу определенную ширину. Когда классы колонок используются как непрямые дочерние элементы строки, отступы опускаются.

.col-3: ширина равна 25%
.col-sm-9: ширина равна 75% выше контрольной точки sm

div class="col-3 bg-light p-3 border"> .col-3: ширина равна 25% div> div class="col-sm-9 bg-light p-3 border"> .col-sm-9: ширина равна 75% выше контрольной точки sm div>

Классы можно использовать вместе с утилитами для создания гибких плавающих изображений. Убедитесь, что содержимое обернуто в оболочку .clearfix , чтобы очистить плавающее значение, если текст короче.

Placeholder

Адаптивное плавающее изображение

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

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

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

div class="clearfix"> img src=". " class="col-md-6 float-md-end mb-3 ms-md-3" alt=". "> p> Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением. p> p> Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать. p> p> И тем не менее, здесь вы, по-прежнему настойчив в чтении этот текст-заполнитель, в надежде еще несколько прозрений, или некоторые скрытые пасхальные яйца содержания. Возможно, шутка. К сожалению, здесь ничего этого нет. p> div>

• Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
• Код под лицензией MIT, документация CC BY 3.0.
• Текущая версия v5.0.2.