[英]Susy columns are breaking
我在使用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> 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> 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> 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> 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> 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> View</a>
</section>
</div>
這里有兩個問題。
問題#1在瀏覽器寬度的某些點上,布局變了,我的行未對齊。 大約960像素是不正確的,然后是1000像素是正確的,然后以1020像素再次發生,然后再次糾正。 查看照片:
問題#2當我向容器添加垂直對齊方式時,容器正確地垂直居中,但是容器向右移動了約10像素,因此它沒有水平居中。 見照片。
任何幫助是極大的贊賞。
.container {位置:絕對; 對於響應式網格? 這對我來說似乎不太對勁,但是我不是專家,而且還沒有將您的html轉移到我自己的編輯器中。
Susy正在使用浮動對象對網格進行布局。 在某些寬度下,網格中的第三個項目比其他項目短,項目#4漂浮在其下方。 您需要添加clear: left;
到第四項,或使用Susy的@include break;
mixin使該預期的換行符明確。 或者,最好將@include span(4)
替換為@include gallery(4)
。 Gallery mixin可以自動處理這種布局。
這可能是由於絕對定位引起的。 絕對定位可從流程中刪除所有內容,並定位在距離最近的祖先位置之外的位置。 在這種情況下,沒有定位的祖先,因此它相對於文檔的根。 我不確定到底該如何工作,但這不是您想要的。 您希望將其放置在您的body
容器之外,因此應添加position: relative;
那里。 但是該容器正在折疊,現在位於您絕對定位的內容周圍,因此它的高度為0,並且您不再垂直居中。 您必須在html
和body
上使用顯式的高度來修復該問題:
html, body { height: 100%; } body { position: relative; }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.