Question

让Susy在Codekit中运行后，我终于能够更彻底地尝试了。我对整个网格和Susy的事情一开始就是正确的。因此，我尝试将Susy网格应用于我最近尝试为锻炼目的而构建的网站的设计。但是，在Susy主页的情景中没有涉及的一些边缘案例中出现了很多关于Susys行为以及最佳实践的问题。我的标记看起来像这样：

<div class="wrapper">

    <header role="banner">
        <div class="finish"></div>

        <a href"/"><a>
        <nav role="navigation">
            <ul>
                <li><a href="#kunden"></a>Kunden</li>
                <li><a href="#projekte"></a>Projekte</li>
                <li><a href="#leistungen"></a>Leistungen</li>
                <li><a href="#agentur"></a>Agentur</li>
                <li><a href="#kontakt"></a>Kontakt</li>
            </ul>
        </nav>
    </header>

    <aside class="intro testcol">
        <h3>Headline 3</h3>
        <p>Ferferiandus ma plibus voluptas assi dis peria conectati dus que mi, sundae seque maximod ipsunt ut opta eture sus dit, nos iligentiis rentin res quam dendi officiae quas esequam, volup- tibea sit, simpore pedis eum explani magnatu mquias dolorio cus aut modolectur sequis nullescid ut veni doluptaturem dolorupit estorpo raectatus.</p>
    </aside>

    <section name="projekte" class="test" role="main">
        <hgroup>
        <h1>Unsere Projekte</h1>
            <h2>Subtitle</h2>
        </hgroup>

        <ul class="moodlegrid">
            <li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
            <li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
            <li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
            <li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
            <li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
            <li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
            <li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
            <li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>
            <li><a href=""></a><img class="projekteimage" title="Projekte" src="img/projekte.jpg" alt="Projekte" width="275" height="178" /></li>           
        </ul>
    </section>
</div>

导致（抱歉由于我的状态，我不允许发布图像 - 但在这种情况下，它们是必不可少的，所以我放置了直接链接）：

https://dl.dropbox.com/u/8578/sample.png

所以div正在包装页面的内容。标题带有徽标（下方屏幕截图中未显示）和导航。然后是浮动的灰色框的旁边元素。在几个部分（如注册卡）下面放置。我在屏幕截图中只包含了一个。每张注册卡应覆盖整个屏幕的宽度。在每张注册卡之间，背景图像通过。背景图像放置在@include background-size（封面）中。作为每张注册卡的旁注，左右两侧应有大约10％的出血，因此内容仅包含在80％的中心。并且每个部分的内容区域包含li的矩阵（如上面的html代码中）或包含内容div的1到3列。到目前为止我使用的css的一些部分：

$base-font-size: 17px;
$base-line-height: $base-font-size * 1.5;

$total-columns: 20;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;

@mixin bleed($padding: $grid-padding, $sides: left right) {
    @if $sides == 'all' {
        margin: - $padding;
        padding: $padding;
    } 
    @else {
        @each $side in $sides {
            margin-#{$side}: - $padding;
                padding-#{$side}: $padding;
            }
        }
}

* { 
    @include box-sizing(border-box);
}

body {
background: url('../img/body-bg.jpg') no-repeat center center fixed;
@include background-size(cover);
color:#333;
padding:0;
margin:0;
width: 100%;
font-size: $base-font-size;
font-family: "Signika", Georgia, serif;
@include establish-baseline;
}

.wrapper {
    width:100%;
    @include container;
    @include susy-grid-background;
    @include bleed;
}

在最后的包装中，旁边和部分驻留。基本问题如下：

a）关于最佳实践的一般性问题。在所描述的示例中，将一个容器放置在包装器div中是否足够，或者更好地创建多个容器，如果放置在整个文档中，那些容器是否会彼此对齐？是指一个容器用于所有容器还是一个容器用于标头，一个用于旁边元件，一个用于每个部分？

b）为旁边元素创建一个容器是否周到。意味着左侧一列内容区域出血，右侧出血一次？或者在这种情况下使用容器会不利？

c）看看这些部分，基本上可以让一个部分填满屏幕的整个宽度，每边都有x列的放气（用垫子（）放置？）并在中间居中“content”区域分为x列（带有span-columns）。

d）如截图所示;在每个部分的顶部有两个箭头指向对方。每个箭头由一个包含文本的内容框以及包含三角形和矩形的前后伪类组成。后者应伸展到每侧的屏幕侧面。它是否有意义并且可以通过将每个元素放在一列中来获得响应式css解决方案：

col1 col2 col3 col4 col5 矩形内容三角形内容矩形左右

通过指定100％的宽度，每个元素应填充其所在列的整个宽度，同时也要响应。如果这个想法可能会成功，那么有必要为每个部分创建两个容器（一个用于箭头，一个用于带有出血的内容）或者一个是否足够？

e）最后一个问题是关于申请。如果我使用：

.moodlegrid li{
    @include column-count(3);
    @include column-gap(1em);
    @include inline-list;
    }

它从头开始看起来像截图。如果我使用Susy mixins，我会得到以下内容：

.moodlegrid li{
    @include span-columns(4,12);
    @include span-columns(4,12);
    @include span-columns(4 omega,12);
    @include inline-list;
    }

，结果如下：

https://dl.dropbox.com/u/8578/result2.png

那就是现在。我仍然有点困惑，不确定最佳实践，以及如果我到目前为止一切都做得很好。 ;）任何提示和建议将不胜感激。在此先感谢拉尔夫

Answer 1

a）我尽可能使用一个容器，但在某些情况下，多个容器可能有用（并且会对齐）。

b）我不明白这个问题。我只需使用squish()向左侧和右侧添加空格。

c）我不知道你在问什么。是的，您可以让元素跨越整个屏幕。您可以通过在结构元素中使用多个容器（而不是将它们全部包装起来），或bleed的非常大的值来实现。这是你的意思吗？

d）我只想在一个左边添加一个大的流血，在另一个的左边添加一个流血。然后使用生成的三角形内容。您不需要让您的出血响应屏幕边缘 - 您可以简单地溢出该边缘并在需要的地方添加overflow-x: hidden;以防止出现滚动条。

e）这段代码没有任何意义。也许你想要这个？

.moodlegrid li {
  @include span-columns(4,12);
  @include nth-omega(3n);
}

即便如此，看起来您可能遇到浮动清算或保证金折叠或其他不相关的问题。

如果您分别询问每个问题并为每个问题创建特定的代码示例，而不是将它们与一个大而复杂的示例混为一谈，将来会有所帮助。这也可以帮助您自己调试问题。简化问题，使其易于管理，然后尝试不同的想法。

关于Susy和奇怪的行为跨栏的基本问题（）

1 个答案: