Суси столбцы ломаются

У меня проблемы с использованием адаптивных сеток Susy. Я пытаюсь настроить макет из двух строк и трех столбцов. Вот код, который я использую.

$susy: (
columns: 12,
gutters: 1/2,
math: fluid,
output: float,
gutter-position: inside,
);

$desktop:960px;

@include breakpoint($desktop){
body{
    @include container(95%);
    background: $faintgray;
}

.container {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

h2 {
    margin: 0 auto 13px auto
}

section {
    @include span(4);   
    text-align: center;
}

section:not(:first-of-type) {
    border-left: 1px dashed $lightgray;
}

}

А вот HTML:

<div class="container">
<section id="frost">
    <h2>Frost Bank</h2>
    <p>Frost Bank founded in 1868 is based in San Antonio with over 110 financial centers across the state.</p>
    <a href="#" class="myButton"><i class="fa fa-search"></i>&nbsp;View</a>
</section>

<section id="shiner">
    <h2>Shiner</h2>
    <p>Spoetzl Brewery was founded in 1909 in Shiner, Texas. It's the oldest brewery in our Lone Star State.</p>
    <a href="#" class="myButton"><i class="fa fa-search"></i>&nbsp;View</a>
</section>

<section id="whataburger">
    <h2>Whataburger</h2>
    <p>Their first burger stand opened in 1950. They serve fresh food made daily, just like you like it.</p>
    <a href="#" class="myButton"><i class="fa fa-search"></i>&nbsp;View</a>
</section>  

<section id="costadelmar">
    <h2>Costa Del Mar</h2>  
    <p>Daytona Beach based Costa, specializes in polarized sunglasses for fishing, sailing, and surfing.</p>
    <a href="#" class="myButton"><i class="fa fa-search"></i>&nbsp;View</a>
</section>

<section id="honeysucklewhite">
    <h2>Costa Del Mar</h2>  
    <p>Daytona Beach based Costa, specializes in polarized sunglasses for fishing, sailing, and surfing.</p>
    <a href="#" class="myButton"><i class="fa fa-search"></i>&nbsp;View</a>
</section>

<section id="morestuff">
    <h2>More Stuff</h2>
    <p>Take a peek at all the other projects I've worked on. There's a some cool stuff here. Check it out!</p>
    <a href="#" class="myButton"><i class="fa fa-search"></i>&nbsp;View</a>
</section>   
</div>

Здесь возникают две проблемы.

Проблема №1 В определенных точках ширины браузера макет становится шатким, и мои строки не выровнены. Примерно на 960 пикселей это неверно, затем на 1000 пикселей это верно, затем это снова происходит на 1020 пикселей, затем снова исправляется. Смотрите фото:

Неправильно

Проблема №2 Когда я добавляю вертикальное выравнивание к контейнеру, контейнер центрируется по вертикали правильно, но контейнер смещается вправо примерно на 10 пикселей, поэтому он не центрируется по горизонтали. Смотри фото.

Не по центру

Любая помощь приветствуется.


html css breakpoints susy-compass
person Meylo Rodriguez    schedule 09.08.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

.container {позиция: абсолютная; для отзывчивой сетки? Мне это кажется не совсем правильным, но я не большой специалист и не переносил ваш html в свой собственный редактор.

person prasutagus    schedule 11.08.2014

arrow_upward
0
arrow_downward

  1. Susy использует поплавки, чтобы разложить вашу сетку. При определенной ширине третий элемент в вашей сетке короче других, а элемент №4 всплывает под ним. Вам нужно добавить clear: left; к этому 4-му элементу или использовать миксин Susy @include break;, чтобы сделать предполагаемый разрыв строки явным. Или вам может быть лучше заменить @include span(4) на @include gallery(4). Миксин галереи создан для автоматической обработки этого типа макета.

  2. Вероятно, это вызвано абсолютным позиционированием. Абсолютное позиционирование удаляет все из потока и позиционирует ближайшего предка. В этом случае нет позиционированного предка, поэтому он относительно корня документа. Я не совсем уверен, как это работает, но это не то, что вам нужно. Вы хотите выйти за пределы контейнера body, поэтому вам следует добавить туда position: relative;. Но этот контейнер сжимается вокруг вашего теперь абсолютно позиционированного контента, поэтому он имеет нулевую высоту, и вы больше не центрированы по вертикали. Вам нужно будет исправить это с помощью явных значений высоты как для html, так и для body:

    html, body {
  height: 100%;
}

body {
  position: relative;
}
person Miriam Suzanne    schedule 16.08.2014