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

Answer 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在left-margin上添加body-left-column，以确保其不在side-bar区域之内。这也意味着它永远不会低于侧边栏。

Answer 2

事实证明我对Susy的要求太高了。我通过在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上给出的示例。

Susy span-columns错位

2 个答案: