[英]How to set a margin between nested grids/ rows element in Susy 2
I try to implement a quite simple HTML structure for displaying comments : an avatar is displayed on the left of the comment text like so : 我尝试实现一种用于显示注释的非常简单的HTML结构:在注释文本的左侧显示一个头像,如下所示:
<div class="comment">
<div class="comment-avatar"><img src="..." /></div>
<div class="comment-text">Some comment text</div>
</div>
I'm using Susy to make the layout : 我正在使用Susy进行布局:
.comment-avatar {
@include span(2);
}
.comment-content {
@include span(10 last);
}
My problem : I would like to space comment between each other, so I've set 我的问题 :我想在彼此之间留空格,所以我已经设定
.comment {
margin-bottom:70px;
}
But that's not effective : sometimes the margin are respected, but when the comment text is long, the margin is not respected (see http://codepen.io/anon/pen/QjrrqP , betweeen latin text and Comment Text 2). 但这不是有效的:有时会忽略边距,但是当注释文本较长时,就不会遵守边距(请参见http://codepen.io/anon/pen/QjrrqP ,拉丁文本和注释文本2)。
Any advice would be very useful ! 任何建议将是非常有用的!
You need the comment
wrapper to clear it's floated contents. 您需要
comment
包装器清除其浮动内容。 Susy has a clearfix
you can use, if you don't have one of your own: 如果您自己没有一个,Susy可以使用一个
clearfix
:
.comment {
@include susy-clearfix;
margin-bottom:80px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.