0

コメントを表示するための非常に単純な 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 の間を参照)。

どんなアドバイスもとても役に立ちます！

4

1 に答える 1

0

commentフローティングコンテンツをクリアするにはラッパーが必要です。Susy にはclearfix、独自のものがない場合に使用できる があります。

.comment {
  @include susy-clearfix;
  margin-bottom:80px;
}
于 2015-10-28T19:18:43.607 に答える