1

Можно ли через изменением класса left добиться игнорирования margin:0 auto родителя?

.wrapper
{
  width:300px;
  margin:0 auto;
}
main
{
  margin:0 auto;
}
.left
{
  margin:0;
}
<div class="wrapper">
  <main>
    <div class="left">Этот блок должен быть слева.</div>
    <div>Этот блок должен быть по центру.</div>
  </main>
</div>

Исходя из http://htmlbook.ru/html/main Элемент <main> предназначен для основного содержимого документа. Содержимое должно быть уникальным и не включать типовые блоки вроде шапки сайта, подвала, навигации, боковой панели, формы поиска и т. п.

.wrapper
{
  width:300px;
  margin:0 auto;
}
.left
{
  margin:0;
}
main
{
  margin:0 auto;
}
<div class="wrapper">
  <div class="left">Этот блок должен быть слева.</div>
  <main>
    <div>Этот блок должен быть по центру.</div>
  </main>
</div>

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

1 ответ 1

2

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

  1. Снаружи – структурные элементы (<header>, <main>, <footer>...).
  2. В них – контейнеры (на всю ширину, по центру или какие ещё нужны).
  3. В контейнерах – полезное содержание.

И пусть в центральной колонке будет только то, что должно быть в центральной колонке:

.wrapper {
  width: 300px;
  margin: 0 auto;
}
<header>
  <div class="wrapper">
     <h1>Шапка</h1>
     <p>Текст шапки по центру.</p>
  </div>
  <div class="full-width">
    <p>Текст шапки на всю ширину.</p>
  </div>
</header>
<main>
  <div class="wrapper">
     <h1>Содержимое</h1>
     <p>Текст по центру.</p>
  </div>
  <div class="full-width">
    <p>Текст на всю ширину.</p>
  </div>
</main>

6
  • Нельзя, по крайней мере из документации, так использовать <main>. До <header> и <footer> нужен <div class="wrapper">, или любого другого класса, для задания общей ширины и центрирования сайта. и в него уже должны быть вложены <header> и <footer>, а между ними навигация, заголовки, боковые меню и <main> который должен содержать только уникальную информацию. (для ru.stackoverfow.com Заглавие темы, вопрос, ответы, комментарии и ничего больше) 26 дек 2016 в 4:45
  • @IlyaIndigo Дайте, пожалуйста, цитату из документации со ссылкой на источник. По-моему, вы говорите об одном из возможных решений, которое для вашей задачи не слишком подходит. 26 дек 2016 в 4:48
  • htmlbook.ru/html/main Элемент предназначен для основного содержимого документа. Содержимое должно быть уникальным и не включать типовые блоки вроде шапки сайта, подвала, навигации, боковой панели, формы поиска и т. п. 26 дек 2016 в 4:51
  • А где здесь про обязательный контейнер снаружи от <main> и про запрет на использование контейнеров внутри <main>? 26 дек 2016 в 4:53
  • Нет. то уже мои нужды. Обязательным является то, что <main> не должна всебя включать ничего, кроме уникальной информации, а следовательно враппер должен быть перед ним, и его не должно быть внутри. 26 дек 2016 в 4:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.