Susy span-columns 未对齐答案

【问题标题】：Susy span-columns Mis-alignmentSusy span-columns 未对齐
【发布时间】：2013-10-09 00:12:19
【问题描述】：

我的网站上有许多 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-left-column 和 body-right-column 布局很好，只要 body-title 部分中没有足够的文本将它们推到侧边栏的垂直长度以下。如果有，它们会浮动到页面的左侧。我在使用 .body-column-double 的页面上没有这个问题。鉴于生成的 css，这种行为似乎很正常。 .body-left-column 类有一个 float:left。此外，如果我按照 Susy 网站上的示例页面所示分别制作左右 5,10 和 5 omega, 10，它们会变得太大而无法并排放置。看来我需要用隐藏的文本或类似的东西来扩展我的侧边栏，以防止所有内容都向左浮动。这是解决方法还是有更好的解决方案？

【问题讨论】：

标签： html css susy-compass

【解决方案1】：

除非您使用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 区域之外。这也意味着它永远不会跌落到侧边栏下方。

【讨论】：

我忘了包括我使用边框大小调整的事实。我已经更新了我的问题以反映其他相关的 susy 数据。如果我只添加 pre(2) body-left-column，如果 body-left 从侧边栏下方开始，它会解决问题。如果它从上面开始，它会左右堆叠。添加 -100% 会使侧边栏位于页面右侧。

【解决方案2】：

原来我对苏西的要求太高了。我通过在 body-left-column 和 body-right-column 周围添加一个标准包装器解决了这个问题，如下面的代码所示。我已经摆脱了对左、中和右列的编码，而在另一个布局中没有围绕最后两个列的包装，因为所有列都是一起开始的。 @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);}

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

这更适合 Susy home page 上给出的示例。

【讨论】：