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

You need the comment wrapper to clear it's floated contents. Susy has a clearfix you can use, if you don't have one of your own:

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