0

我有一堆用 HTML5 定义的文章，如下所示：

    <section class="applications">
        <article>
            <a href="..."><img ... /></a>
            <h2>...</h2>
            <p>...</p>
            <a ... class="appstore">...</a>
        </article>

每篇文章都有这些完全相同的元素。使用 Susy 2.x 我试图弄清楚如何放置东西，使图像位于左上角，下方有空白空间（即第 1 列），然后向右，占据其余宽度页面，我有一个垂直布局，其中 <h2> 高于 <p> 高于 <a class="appstore">。

您可以在这张图片中看到我正在寻找的所需格式：

所需格式

我的样式按我想要的方式工作，但至于布局......我很确定我现在必须使用“@include span”的东西，但玩了一个小时后我就是无法正确. 谢谢！

4

1 回答 1

0

您根本不必使用 Susy，但您当然可以。:)

这是一个非常常见的 CSS 问题，因为我们经常使用浮动来进行布局，而实际上它们并非如此。Susy 实际上只是一组帮助管理布局数学的快捷方式，但它无法修复 CSS。首先在 CSS 中解决您的布局问题，然后确定 Susy 可以在哪些方面帮助澄清和简化您的代码。

例如，以下是 CSS 中几种可能的解决方案，仅使用浮点数：

// Option A
// --------

.image-link {
  float: left;
  width: 24%;
}

.title, .description, .purchase {
  float: right;
  width: 75%;
}

// Option B
// --------

.image-link {
  float: left;
  width: 24%;
}

.title, .description, .purchase {
  margin-left: 25%;
}

// Option C
// --------

article {
  padding-left: 25%;
}

.image-link {
  float: left;
  width: 24%;
  margin-left: -25%;
}

会有很多其他解决方案使用绝对定位、额外标记或许多其他方法。您更喜欢哪一个取决于您希望它如何工作，您对标记的控制程度等。

Susy 的span()mixin 输出浮点方向（默认为左，但如果使用last关键字则为右）、宽度和可选的某种排水沟。和mixins 分别设置边距或填充pre()/push()/pull()。prefix()或者您可以完全跳过 mixins，并使用该span()函数在任何您想要的地方进行网格计算。

// Option A
// --------

.image-link {
  @include span(1 of 4);
}

.title, .description, .purchase {
  @include span(last 3 of 4);
}

// Option B
// --------

.image-link {
  float: left;
  width: span(1 of 4);
}

.title, .description, .purchase {
  @include pre(1 of 4);
}

// Option C
// --------

article {
  @include prefix(1 of 4);
}

.image-link {
  @include span(1 of 4);
  @include pull(1 of 4);
}

您还可以使用 Susy 的isolation功能或许多其他方法——所有这些都只是数学和 CSS 的包装器。不要让 Susy 的抽象隐藏了您使用 CSS 工作的事实，而浮点数只是浮点数。

于 2014-07-19T21:27:08.297 回答