Добавление отступов по бокам нарушает макет

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

У меня настроен контейнерный div, а в нем #main div с 9 столбцами для контента и боковой панелью из 3 столбцов. #main div имеет белый фон, поэтому мне нужно немного отступов вокруг него, но всякий раз, когда я добавляю отступы, макет ломается, а боковая панель опускается вниз.

без заполнения: введите здесь описание изображения

с отступом: введите здесь описание изображения

моя структура html:
.container
+ основной
++ контент ( @include span(9))
++ боковая панель ( @include span(последние 3))

У меня также глобально установлен размер рамки как в html, так и в настройках susy. Если я добавлю width: 100% и box-sizing: content-box в #main div, это сработает, но сделает контейнер шире с правой стороны, протолкнув его за пределы элементов над ним и под ним, что я понимаю, поскольку content-box добавляет к нему. Это работает в некотором смысле, но не мой желаемый результат. Мне нужно, чтобы #main div оставался той же ширины, но позволял добавлять отступы слева и справа.

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

Обновление 1: Добавление отступов в div Content и Sidebar работает, за исключением того, что на одной из моих страниц у меня есть галерея изображений в div Content, которая делает то же самое, третий элемент в строке падает вниз.

Обновление 2: Потратив весь день на размышления и работу над этим, я пришел к выводу, что это связано с тем, что это фиксированный сайт с фиксированной шириной столбцов. Макет не ломается, когда ширина div устанавливается в %, даже с контейнером фиксированной ширины. Интересно. Может быть, есть способ заставить Susy работать так, используя «статический» математический вывод, я не уверен.


susy-compass susy
person Colby Work    schedule 30.01.2015    source источник
comment
вот ссылка на codepen ... я не мог поместить ее в OP, так как у меня нет репутации 10 и не может быть более 2 ссылок. codepen.io/colbywork/pen/myMgmM   -  person Colby Work    schedule 30.01.2015
comment
Вместо добавления отступа к #main добавьте его к #content и #sidebar.   -  person APAD1    schedule 30.01.2015
comment
@ APAD1, кажется, помогает, спасибо. Я ошибаюсь, предполагая, что должен быть способ заставить работать другой метод? Я думал, что border-box должен решать подобные проблемы.   -  person Colby Work    schedule 31.01.2015
comment
@ColbyWork, настройка рамки вам не поможет. Реализуйте это, как в моем ответе, и все будет в порядке.   -  person yivi    schedule 01.02.2015

Ответы (2)


arrow_upward
0
arrow_downward

Добавьте его в свои столбцы, например:

#content {
  @include span(9 of 12);
  padding: 20px 0 20px 20px;
}

#sidebar {
  @include span(last 3 of 12);
  padding: 20px 20px 20px 0;
}

Вот у вас работает:

http://codepen.io/yivi/pen/BywygG

А здесь с плавной математикой: http://codepen.io/yivi/pen/jEGEjj

person yivi    schedule 01.02.2015
comment
yivi, посмотри, что происходит, когда я добавляю вложенность... проблема, кажется, повторяется: codepen.io/colbywork /pen/wBrroO - person Colby Work; 03.02.2015
comment
ах, неважно - работает с плавной математикой. Бинго, как я и думал ранее во втором обновлении. спасибо @yivi - person Colby Work; 03.02.2015
comment
Ну да. Если вы собираетесь вложить в него больше контейнеров Susy, водосточные желоба вас запутают. Либо вы правильно объявите вложенный контейнер с измененной шириной, либо вы сломаете вещи. Но это был не первоначальный вопрос. Если ответ помог, пожалуйста, примите его? С уважением. - person yivi; 03.02.2015

arrow_upward
0
arrow_downward

Я смог исправить это, увеличив его еще на 1 столбец.

http://codepen.io/anon/pen/RNZOQL

columns: 13

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

person QAZZY    schedule 30.01.2015
comment
это работает, но не совсем то, что мне нужно. У меня есть другие части сайта, которые опираются на 12 сеток (3 блока, 4 столбца), и это создает огромный пробел. спасибо, что нашли время, чтобы помочь мне, хотя. - person Colby Work; 31.01.2015