0

我有许多 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，它们会变得太大而无法并排放置。看来我需要用隐藏的文本或类似的东西来扩展我的侧边栏，以防止所有内容都向左浮动。这是处理它的方法还是有更好的解决方案？

4

2 回答 2

1

除非您使用border-box模型，否则您不能为 susy 网格元素添加边框。如果您删除边框，或将 更改box-sizing为border-box，您会看到一切都恢复原状。Susy 有一个border-box-sizingmixin 可以改变所有元素的模型。

另一种选择是这样的：

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

于 2013-10-06T20:01:28.577 回答
0

原来我对苏西的要求太高了。我通过在 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主页上给出的示例。

于 2013-10-08T16:11:25.617 回答