Susy跨列錯誤對齊

Question

我有一些Susy佈局在我的網站上正常工作。我試圖添加另一個，在整個身體的左側有兩列側欄，後面跟着兩個五列欄。這是代碼：

CSS

$total-columns : 12;   // a 12-column grid 
$column-width : 3.5em;  // each column is 4em wide 
$gutter-width : 1em;  // 1em gutters between columns 
$grid-padding : 0;   // grid-padding equal to gutters 

@include border-box-sizing; // Part of Susy 

.side-bar { @include span-columns(2,12); border-right: 2px solid $darkRed;} 
.body-title { @include span-columns(10 omega,12);} 
.body-double-column 
{ 
    @include span-columns(10 omega, 12); 
    column-count: 2; 
} 
.body-left-column { @include span-columns(5, 12);} 
.body-right-column { @include span-columns(5 omega, 12);} 

HTML

<div id="bounding-box"> 
     <div class="side-bar"> 
     </div> <!-- /side-bar --> 
     <section class="body-title"> 
     </section> 
     <section class="body-left-column"> 
     </section> 
     <section class="body-right-column"> 
     </section> 
     <div class="push"></div> 
    </div> <!-- /bounding-box --> 

身體左柱，並且只要罰款，因爲沒有身體右側欄佈局足夠的文字在正文標題部分將它們推到側欄的垂直長度以下。如果有，它們會浮動到頁面的左側。我在使用.body-column-double的頁面上沒有這個問題。考慮到生成的CSS，這種行爲看起來很正常。 class .body-left-column有一個float：left。另外，如果我按照Susy網站上的示例頁面中所示分別製作左右5,10和5歐米茄，則它們變得太大而不能並排放置。似乎我需要用隱藏的文本或類似的東西來擴展我的邊欄，以防止所有東西都向左浮動。這是接近它的方式還是有更好的解決方案？

Answer 1

原來我是在問蘇西太多了。我通過在body-left-column和body-right-column周圍添加一個標準包裝來解決這個問題，如下面的代碼所示。因爲所有的列開始在一起，所以我編寫了一個左邊，中間和右邊的列，而沒有在另一個佈局的最後兩個列表中封裝。 @埃裏克的方法在某些情況下解決了這個問題。不管身體標題部分的長度如何，這種方法都可以工作。

CSS

.side-bar { @include span-columns(2,12); border-right: 2px solid $darkRed;} 
.body-wrapper { @include span-columns(10 omega, 12); } 
.body-title { @include span-columns(10 omega,10);} 
.body-double-column 
{ 
    @include span-columns(10 omega, 10); 
    column-count: 2; 
} 
.body-left-column { @include span-columns(5, 10);} 
.body-right-column { @include span-columns(5 omega, 10);} 

HTML

<div id="bounding-box"> 
    <div class="side-bar"> 
    </div> <!-- /side-bar --> 
    <section class="body-wrapper"> 
     <section class="body-title"> 
     </section> 
     <section class="body-left-column"> 
     </section> 
     <section class="body-right-column"> 
     </section> 
    </section> <!-- /body-wrapper--> 
    <div class="push"></div> 
</div> <!-- /bounding-box --> 

這正好與超對稱home page給出的例子更好。

Answer 2

除非您正在使用border-box模型，否則不能將邊框添加到susy網格元素。如果您刪除邊框，或將box-sizing更改爲border-box，則會看到所有內容都回落到原位。 Susy有一個border-box-sizing mixin，它將改變所有元素的模型。

另一種辦法是這樣的：

.side-bar { 
    @include span-columns(2,12); 
    margin-right: -100%; 
    border-right: 2px solid red; 
} 

.body-left-column { 
    @include span-columns(5, 12); 
    @include pre(2); 
} 

負保證金權基本上從流刪除工具條（儘管你仍然可以與clear屬性清除它，不像position: absolute）。然後pre在body-left-column上加上left-margin以確保它不在side-bar區域。這也意味着它永遠不會跌破側邊欄。