Susy列断裂

Question

我在使用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像素，因此它没有水平居中。 见照片。

不居中

任何帮助是极大的赞赏。

Answer 1

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

Answer 2

1. Susy正在使用浮动对象对网格进行布局。 在某些宽度下，网格中的第三个项目比其他项目短，项目＃4漂浮在其下方。 您需要添加clear: left; 到第四项，或使用Susy的@include break; mixin使该预期的换行符明确。 或者，最好将@include span(4)替换为@include gallery(4) 。 Gallery mixin可以自动处理这种布局。

2. 这可能是由于绝对定位引起的。 绝对定位可从流程中删除所有内容，并定位在距离最近的祖先位置之外的位置。 在这种情况下，没有定位的祖先，因此它相对于文档的根。 我不确定到底该如何工作，但这不是您想要的。 您希望将其放置在您的body容器之外，因此应添加position: relative; 那里。 但是该容器正在折叠，现在位于您绝对定位的内容周围，因此它的高度为0，并且您不再垂直居中。 您必须在html和body上使用显式的高度来修复该问题：

    html, body { height: 100%; } body { position: relative; }