Html Susy跨度柱未对齐

我有许多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);}

.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-title">
        </section>
        <section class="body-left-column">
        </section>
        <section class="body-right-column">
        </section>
        <div class="push"></div>
    </div> <!-- /bounding-box -->

<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 -->

---

只要正文标题部分中没有足够的文本将正文左栏和正文右栏的布局推到侧栏的垂直长度以下，正文左栏和正文右栏的布局就可以。如果有，它们将浮动到页面的左侧。我在使用.body列double的页面上没有这个问题。考虑到生成的css，这种行为似乎很正常。body left列有一个float:left。此外，如果我按照Susy站点上的示例页面中的指示分别制作左侧和右侧的5,10和5ω，10，它们将变得太大，无法并排放置。似乎我需要用隐藏文本或类似的东西来扩展我的侧栏，以防止所有内容向左浮动。这是解决方法还是有更好的解决方案？

除非使用

边框框

模型，否则无法将边框添加到susy网格元素。如果删除边框，或将

框大小调整

更改为

边框框

，您将看到所有内容都重新就位。Susy有一个

边框框大小调整

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列上添加
left margin
，以确保它不在
侧栏
区域内。这也意味着它永远不会落在边栏下面
 原来我对苏西要求太多了。我修复了这个问题，在body left列和body right列周围添加了一个标准包装器，如下面的代码所示。我在另一个布局中编写了一个左、中、右列，但没有在最后两个列周围添加包装器，因为所有列都是从一起开始的@Eric的方法解决了某些情况下的问题。无论正文标题部分的长度如何，这种方法都有效

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);}

.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-title">
        </section>
        <section class="body-left-column">
        </section>
        <section class="body-right-column">
        </section>
        <div class="push"></div>
    </div> <!-- /bounding-box -->

<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 -->



这更符合Susy上给出的示例。
我忘了包括我使用边框框大小的事实。我已经更新了我的问题，以反映其他相关的susy数据。如果我只是添加了pre（2）body left列，那么如果body left从侧栏下方开始，它就解决了这个问题。如果它从上面开始，它会向左和向右堆叠。添加-100%将侧栏置于页面右侧。