Susy 柱子断了答案

【问题标题】：Susy columns are breakingSusy 柱子断了
【发布时间】：2014-08-17 05:47:14
【问题描述】：

我在使用 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 像素处再次发生，然后再次更正。查看照片：

Incorrect

问题 #2 当我将垂直对齐添加到容器时，容器垂直居中正确，但容器向右移动约 10 像素，因此它没有水平居中。见照片。

Not Centered

非常感谢任何帮助。

【问题讨论】：

标签： html css breakpoints susy-compass

【解决方案1】：

.container {位置：绝对；对于响应式网格？这对我来说似乎不太正确，但我不是很好的专家，我还没有将你的 html 转移到我自己的编辑器中。

【讨论】：

【解决方案2】：

Susy 正在使用浮动来布置您的网格。在某些宽度下，网格中的第 3 项比其他项短，第 4 项在其下方浮动。您需要将 clear: left; 添加到第 4 项，或使用 Susy 的 @include break; 混合来明确预期的换行符。或者，您最好将@include span(4) 替换为@include gallery(4)。图库 mixin 旨在自动处理这种类型的布局。
这可能是由绝对定位引起的。绝对定位从流中删除所有内容，并定位最近的定位祖先。在这种情况下，没有定位的祖先，所以它相对于文档的根。我不确定这到底是如何工作的，但这不是你想要的。你想定位你的body 容器，所以你应该在那里添加position: relative;。但是该容器正在围绕您现在绝对定位的内容折叠，因此它的高度为 0，并且您不再垂直居中。您必须在 html 和 body 上使用明确的高度来解决这个问题：
```
html, body {
  height: 100%;
}

body {
  position: relative;
}
```

【讨论】：