我正在关注迈克尔·哈特尔的Rails教程,我已经达到了设计用户微博饲料的程度。微博呈现出部分,Hartl的网站显示应该看起来像this,但我看起来像this。玩了一下之后,我注意到帖子在列中呈现的很好直到加载了Gravatars;然后微博缩进不正确。
这是我的微博部分:
<li id="micropost-<%= micropost.id %>">
<%= link_to gravatar_for(micropost.user, size: 50), micropost.user %>
<span class="user"><%= link_to micropost.user.name, micropost.user %></span>
<span class="content">
<%= micropost.content %>
</span>
<span class="timestamp">
Posted <%= time_ago_in_words(micropost.created_at) %> ago.
</span>
</li>
如果我注释掉Gravatar的链接,那么微博的列就会很好。这不是first time我在本教程中遇到Gravatar的麻烦,我真的不知道如何以允许此页面呈现我想要的方式来实现它。任何和所有的帮助将不胜感激!
编辑:以下是微博的相关样式:
.microposts {
list-style: none;
padding: 0;
li {
padding: 10px 0;
border-top: 1px solid #e8e8e8;
}
.user {
margin-top: 5em;
padding-top: 0;
}
.content {
display: block;
margin-left: 60px;
img {
display: block;
padding: 5px 0;
}
}
.timestamp {
color: $gray-light;
display: block;
margin-left: 60px;
}
.gravatar {
float: left;
margin-right: 10px;
margin-top: 5px;
}
}
aside {
textarea {
height: 100px;
margin-bottom: 5px;
}
}
span.picture {
margin-top: 10px;
input {
border: 0;
}
}
答案 0 :(得分:0)
您需要在结束</li>
之前添加clearfix,以便在下一行之前清除浮点数。否则它们将像你的图像一样叠加,因为每个gravatar都向左浮动。
...
<span class="timestamp">
Posted <%= time_ago_in_words(micropost.created_at) %> ago.
</span>
<span class="clearfix"></span>
...
CSS:
.clearfix {
clear: both;
}