Susy span-柱Mis-对齐

Question

我有一些苏西布局工作在我的网站很好。我试图添加另一个，在整个身体的左边有一个两列的边栏，然后是两个五个列段。这是代码：

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

    <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列-double。考虑到生成的css，这种行为似乎是正常的。类..body左侧列有float:left。另外，如果我把左边和右边的5,10和5 omega，分别如Susy站点上的示例页面中所示的那样，它们变得太大了，无法并排安装。似乎我需要用隐藏的文本或类似的东西来扩展我的侧边栏，以防止所有东西向左浮动。这是接近它的方式，还是有一个更好的解决方案？

Answer 1

原来我对苏西要求太多了。我通过在主体-左-列和体-右列周围添加一个标准包装器来解决这个问题，如下面的代码所示。我没有在另一个布局中对最后两个列进行包装，而是编写了一个左、中、右列，因为所有的列都是一起开始的。@Eric的方法解决了某些情况下的问题。不管正文标题部分的长度如何，这种方法都是有效的。

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

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

这与苏西主页上给出的例子更符合。

Answer 2

除非使用border-box模型，否则不能向susy网格元素添加边框。如果移除边框，或将box-sizing更改为border-box，您将看到一切都已恢复正常。Susy有一个border-box-sizing混音，它将改变所有元素的模型。

另一种选择是这样的：

.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区域。这也意味着它永远不会跌落在侧边栏之下。