css - 如何在 Susy 2 中设置嵌套网格/行元素之间的边距

Question

我尝试实现一个非常简单的 HTML 结构来显示评论:头像显示在评论文本的左侧，如下所示:

<div class="comment">
     <div class="comment-avatar"><img src="..." /></div>
     <div class="comment-text">Some comment text</div>
</div>

我正在使用 Susy 进行布局:

.comment-avatar {
    @include span(2);
}

.comment-content {
    @include span(10 last);
}

我的问题:我想在评论之间留出空间，所以我设置了

.comment {
   margin-bottom:70px;
}

但这并不有效:有时会考虑边距，但当评论文本很长时，不会考虑边距(请参阅 http://codepen.io/anon/pen/QjrrqP，在拉丁文本和评论文本 2 之间)。

任何建议都会非常有用!

Answer 1

您需要 comment 包装器来清除它的 float 内容。 Susy 有一个 clearfix 可以使用，如果你没有自己的:

.comment {
  @include susy-clearfix;
  margin-bottom:80px;
}