Как правильно разделить страницу на блоки?
Есть страница с блоками. Но у меня встала проблема ибо я запутался. Как мне разделить центральный блок на две части, и правую часть разделить еще надвое. В них должны быть блоки с информацией по центру
.wrapper < width: 100%; display: flex; >.block_left, .block_center, .block_right < flex: 1; >.block_left < background: #294A5D; max-width: 250px; >.block_center < background: #FFF; >.bar < background: #F3F3F3; height: 80px; >.logo < height: 80px; background-color: #FFF; background-repeat: no-repeat; background-position: center; >.menu span, .menu a < display: block; >.menu span < padding-left: 20px; color: #C3D6DD; margin: 20px 0; >.menu a < padding-left: 50px; color: #87949A; margin: 10px 0; >.nav a
- Вопрос задан более трёх лет назад
- 3482 просмотра
Разделение страницы на 3 независимых вертикальных блока
Задача состоит в том, что необходимо разделить на три части страницу. Два сайдбара слева и справа, и контент посередине. Ширина каждого блока статическая и главное что блок с контентом должен отображаться по центру. Неожиданно возникли проблемы с такой задачей и нигде не могу найти решение, уже вроде все перепробовал и интернет прошерстил. Вот что у меня вышло с помощью display: table. Но блоки между собой очень зависимы, и я даже не могу воспользоваться какими-либо отступами для контента, не затрагивая другие блоки. HTML:
some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content .page-wrapper < display: table; width: 100%; height: 100%; >.left-panel-wrapper, .right-panel-wrapper < display: table-cell; width: 100px; height: 100%; background-color: #f6f8fa; >.left-panel, .right-panel < display: inline-block; >.content-wrapper < display: table-cell; >.content
Отслеживать
задан 13 мар 2018 в 18:23
355 3 3 серебряных знака 19 19 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
.page-wrapper < display: flex; justify-content: space-between; >.left-panel-wrapper < width: 200px; background-color: orange; >.right-panel-wrapper < width: 200px; background-color: green; >.content-wrapper < /*width: 250px;*/ width: calc(100% - 400px); padding: 0 30px; > some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content
на inline-block с костылём
.page-wrapper < text-align: justify; overflow: hidden; min-width: 1000px; >.page-wrapper:after < content: ''; width: 100%; display: inline-block; >.left-panel-wrapper < display: inline-block; width: 200px; background-color: orange; vertical-align: top; >.right-panel-wrapper < display: inline-block; width: 200px; background-color: green; vertical-align: top; >.content-wrapper < display: inline-block; vertical-align: top; width: 500px; margin: 0 auto; padding: 0 10px; >/* костыль */ .left-panel-wrapper, .right-panel-wrapper, .content-wrapper < position: relative; >.left-panel-wrapper:before, .right-panel-wrapper:before, .content-wrapper:before
some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content
Суть в том, что обвертки даёте overflow: hidden; а каждой колонки подкладку в виде before, через absolute, что создаёт вид background.
Разделы веб-страницы
Практически любую веб-страницу можно разбить на ряд визуальных блоков, которые обычно отделяются друг от друга фоном или пустым пространством, поэтому хорошо заметны (рис. 1).
Рис. 1. Деление веб-страницы на разделы
Подобное разделение помогает нам ориентироваться на веб-странице и сразу выделять главное и второстепенное содержимое. Нам проще воспринимать веб-страницу, когда на ней всё интуитивно понятно — вот навигация, это основная статья, а это строка для поиска. Браузеры так же учитывают такое деление и могут готовить версию для чтения или печати, содержащую только статью — без рекламы, ссылок и лишнего оформления. Речевые браузеры, нацеленные на слабовидящих людей, тоже могут пропускать ненужную в данный момент информацию и переходить непосредственно к чтению самой статьи.
Таким образом от разделения веб-страницы на блоки выигрывают все. Пользователям удобнее и нагляднее пользоваться сайтом, а разработчику проще писать код HTML и его поддерживать.
Вот какие разделы могут присутствовать на веб-странице.
- Навигация — основные ссылки для перехода к разным веб-страницам сайта.
- «Шапка» — вступительная верхняя часть веб-страницы, содержащая логотип сайта, его название, поиск по сайту, навигацию и др.
- Основное содержимое — для информационных сайтов это статья с названием, датой публикацией, автором, комментариями к статье.
- Боковая панель — как правило, вертикальный блок, содержащий второстепенную информацию, вроде формы поиска, меню, голосования, рекламы и др.
- «Подвал» — заключительная нижняя часть веб-страницы, обычно содержащая контактную и правовую информацию. Это телефоны, адреса, схема проезда, кнопки социальных сетей, дублирование навигации и др.
В HTML есть несколько элементов, позволяющих поделить веб-страницу на разделы и задать им определённый смысл.
CSS — Урок 10. Позиционирование блоков
В HTML для позиционирования элементов на странице мы использовали таблицы. У таблиц есть как преимущества (легкость использования, одинаковое отображение браузерами), так и недостатки (объемный, нечитабельный код, нелогичность верстки и т.д.).
В CSS для позиционирования элементов используются блоки (div-ы). Код при этом становится компактным, логичным и легко изменяемым. К недостаткам блочной верстки можно отнести неодинаковую поддержку браузерами, поэтому приходится писать кроссбраузерный код (т.е. код, который отображается разными браузерами почти одинаково).
Итак, приступим. Предположим, у нас есть вот такая стандартная html-страница:
| шапка сайта | |
| меню | контент |
| низ сайта | |
Эту страницу мы с вами делали в серии уроков, посвященных HTML, а точнее в уроке 10 этой серии, где мы и верстали ее с помощью таблицы. Эта страница имела следующий код:
CSS позиционирование
| шапка сайта | |
| меню | контент |
| низ сайта | |