Html body wrap content

Адаптивная верстка блоков

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

* < margin: 0; padding: 0; outline: 0; box-sizing: border-box; font-size: 20px; font-weight: bolder; text-align: center; >html, body, .wrap-content < height: 100%; width: 100%; >.wrap-content < display: table; >.slider, .gallery, .left-bottom-block-gallery, .right-bottom-block-gallery < display: table-cell; height: 100%; >.block-footer, .block-header < height: 50%; >.block-footer < background: red; >.block-header < background: blue; >.slider < width: 35%; background: lightblue; >.gallery < width: 45%; >.top-block-gallery, .bottom-block-gallery, .top-right-bottom-block-gallery, .bottom-right-bottom-block-gallery < height: 50%; >.top-block-gallery < background: #8D6E63 >.bottom-block-gallery < display: table; width: 100% >.left-bottom-block-gallery, .right-bottom-block-gallery < background: lightgreen; width: 50%; >.top-right-bottom-block-gallery < background: red; >.bottom-right-bottom-block-gallery

 
блок
 
блок
 
слайдер
 
верхний блок галереи
 
нижний
 
блок
 
галереи
 
 
 
 

2 ответа 2

У вас сложная блочная структура, судя по вашему примеру. В такой ситуации рекомендую использовать Grid Layout.

Посмотрите данный пример при разных разрешениях (просто в снипете и в сниппете на весь экран, например). Он адаптивен. Для каждого размера задаётся своё расположение элементов. Это новая возможность добавленная в Grid Layout.

.grid-container < display: grid; grid-template-areas: "header header" "sidebar content" "sidebar content"; >@media (max-width: 800px) < .grid-container < grid-template-areas: "header" "content" "sidebar"; >> .header < grid-area: header; background-color: blue; >.content < grid-area: content; background-color: red; >.sidebar < grid-area: sidebar; background-color: green; >div div

 
заголовок
 
контент
 
сайдбар
 

Если уж очень хочется переделать этот шаблон используйте media выражения. А вообще советую использовать flex.

* < margin: 0; padding: 0; outline: 0; box-sizing: border-box; font-size: 20px; font-weight: bolder; text-align: center; >html, body, .wrap-content < height: 100%; width: 100%; >.wrap-content < display: table; >.slider, .gallery, .left-bottom-block-gallery, .right-bottom-block-gallery < display: table-cell; height: 100%; >.block-footer, .block-header < height: 50%; >.block-footer < background: red; >.block-header < background: blue; >.slider < width: 35%; background: lightblue; >.gallery < width: 45%; >.top-block-gallery, .bottom-block-gallery, .top-right-bottom-block-gallery, .bottom-right-bottom-block-gallery < height: 50%; >.top-block-gallery < background: #8D6E63 >.bottom-block-gallery < display: table; width: 100% >.left-bottom-block-gallery, .right-bottom-block-gallery < background: lightgreen; width: 50%; >.top-right-bottom-block-gallery < background: red; >.bottom-right-bottom-block-gallery < background: blue; >@media only screen and (max-width: 768px) < .wrap-content, .slider, .gallery, .bottom-block-gallery, .left-bottom-block-gallery, .right-bottom-block-gallery < display: block; width: 100% >.slider, .gallery < width: 100% >>

 
блок
 
блок
 
слайдер
 
верхний блок галереи
 
нижний
 
блок
 
галереи
 
 
 
 

Источник

Лучший способ реализовать «обёртки» в CSS

Иногда первое, что мы пишем на странице — это элемент, оборачивающий всё остальное на странице. Термин «Обёртка» типичен для этого. Мы задаём ему класс, отвечающий за инкапсуляцию всех визуальных элементов на странице.

Я всегда боролся за то, чтобы найти лучший способ реализовать его. Я нашёл соответствующую тему на StackOverflow с более чем 250000 просмотров, что говорит о её огромной популярности. В этой статье я подытожу свои мысли.

Перед тем, как пойти дальше, сначала рассмотрим разницу между «обёрткой» (wrapper) и «контейнером» (container).

«Обёртка» против «Контейнера»

Я вижу разницу между элементом-обёрткой и элементом-контейнером.

В языках программирования слово «контейнер» обычно используется для структуры, содержащей более одного элемента. «Обёртка» же — это нечто, что оборачивается вокруг одного объекта, чтобы предоставить интерфейс к нему и расширить его функциональность.

Так что, мне кажется, есть смысл оставить два названия, поскольку они предполагают разные функции.

Обёртка ассоциируется с , который содержит весь остальной HTML в документе. Уверен, что многие помнят то время, когда мы устанавливали для ширину 960px и центрировали основной контент. Обёртки так же были полезны, чтобы прижать футер.

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

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

Вот пример общей обёртки страницы:

/** * 1. Центрируем содержимое. Да, это немножко вкусовщина. * 2. См. раздел «width против max-width» * 3. См. раздел «Дополнительные внутренние отступы» */ .wrapper < margin-right: auto; /* 1 */ margin-left: auto; /* 1 */ max-width: 960px; /* 2 */ padding-right: 10px; /* 3 */ padding-left: 10px; /* 3 */ >

width против max-width

После установки ширины блочному элементу он больше не сможет растягиваться на всю ширину своего контейнера (полезно для комфортной длины строк). Следовательно, элемент-обёртка займёт указанную ширину. Но если окно браузера Уже указанной ширины обёртки, то появится нежелательный горизонтальный скролл.

Поэтому для окон поуже лучше использовать max-width . Это важно при оптимизации сайтов под мобильные устройства с маленьким экраном. Вот неплохой пример, который демонстрирует эту проблему.

С точки зрения отзывчивости max-width лучший выбор!

Дополнительные внутренние отступы

Я видел, как многие разработчики забывали один граничный случай. Допустим, есть обёртка с max-width: 980px. Этот граничный случай проявляется при экране устройства 980px. Поэтому, её содержимое прилипнет точно к краям экрана, не оставляя «воздуха».

Эта проблема нехватки «воздуха»

Обычно нам нужны отступы по краям. Вот почему, когда мне нужна обёртка шириной 980px, я делаю так:

Вот почему добавление padding-left и padding-right к обёртке будет хорошей идеей, особенно на мобильных устройствах.

Или подумайте о box-sizing, чтобы отступы вообще не влияли на общую ширину.

Какой HTML-элемент выбрать

У обёртки нет семантики. В ней просто находятся все визуальные элементы и контент на странице. Он всего лишь просто контейнер. С точки зрения семантики, — лучший выбор. У тоже нет семантического значения, это просто контейнер

Невольно возникает вопрос, а может ли для этой цели подойти элемент . Однако, спецификация W3C говорит вот что:

Элемент не замена общему элементу-контейнеру. Если элемент нужен чисто для оформительских целей или как вспомогательное средство для скриптов, то рекомендуется использовать . Общее правило таково: элемент раздела подходит в случае, когда содержимое элемента явно указано в схеме документа.

Элемент несёт в себе собственную семантику. Он подходит для тематической группировки контента. В каждом разделе должен быть заголовок (элемент h1-h6) в качестве дочернего элемента (прим. перев.: это не строгое правило, но крайне желательно соблюдать его).

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

Сходу это может показаться неочевидным. Но да, старый добрый лучше всего подходит для обёртки!

Тег против дополнительного

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

И в результате у вас в разметке будет одним элементом меньше, поскольку удалён ненужный обёрточный .

Однако, лучше этого не делать ради гибкости и устойчивости к изменениям. Представьте любой из этих сценариев на поздней стадии проекта:

• Вам нужно «прибить» футер к концу документа (к низу окна, если документ короткий). И если даже воспользоваться flexbox в качестве современного способа, всё равно не обойтись без обёрточного (прим. перев.: на самом деле можно задать display: flex самому body , тем более в примере по ссылке так и сделано).
• Вам требуется установить background-color целой странице. Поскольку у body есть max-width , то его нельзя использовать. Но тогда можно установить фон тегу . Но тут я сомневаюсь. После прочтения статьи HTML vs Body in CSS это звучит для меня немного необычно. Однако, я не слышал каких-то проблем или трудностей с применением цвета фона для элемента . Но это по-прежнему звучит немного странно, да? (Прим. перев.: проблема с фоновым цветом преувеличена, поскольку по стандарту CSS любой фон, указанный для , и так применяется ко всему , если тому явно не задан собственный фон. Но могут быть другие проблемы, например, со сторонними скриптами, позиционирующими всплывающие окна и т.п. именно относительно )

Лично я склоняюсь к тому, что для реализации обёртки всё же лучше использовать дополнительный . Таким образом, если требования спецификации позже изменятся, то потом не придётся добавлять обёртку и переписывать стили. В конце концов, речь же об одном-единственном добавочном DOM-элементе.

P.S. Это тоже может быть интересно:

Если вам понравилась статья, поделитесь ей!

Источник

Атрибут wrap

Атрибут управляет процессом переноса строк, а также определяет в какой форме информация будет отправлена на сервер для обработки. Изначально, без атрибута wrap, текст записывается в одну строчку. Перенос текста осуществляется после нажатия кнопки Enter. Если этого не делать, то после заполнения ширины поля будет появлятся горизонтальный скролл в поле.

Как правильно задавать?

textarea wrap="soft"> textarea>

Какие значения могут быть записаны в атрибут?

• soft — включает автоматический перенос строк при заполнении ширины поля. Однако на сервер информация будет отправлена в одну строку. Для отправки на сервер информации на несколько строк необходимо воспользоваться клавишей Enter для переноса.
• hard — аналогичен по своим функциям значению soft. Отличие заключается в том, что автоматические переносы сохраняются для отправки на сервер.
• off — отключает переносы для текстового поля.

В каких тегах применяется?

Пример использования

DOCTYPE HTML> html> head> meta charset="utf-8"> title>Атрибут wraptitle> head> body> form action="text.php" method="post"> p>b>Введите сообщение:b>p> p>textarea rows="15" cols="65" name="area" wrap="hard">textarea>p> p>input type="submit" value="Передать">p> form> body> html>

Источник