Html 名单及「；“向左拉”；做楼梯

我想做一些类似博客评论的事情。在注释和用户名的左侧有用户的图像。我的代码如下

<ul class="list-group">
  <%  @posts.each do |post| %>
    <li class="list-group-item">
      <%= image_tag("test.jpg", :style=>"height:70px; width:auto; float:left") %>
      <h5 class="list-group-item-heading"><%= post.user.nickname %></h5>
      <p class="list-group-item-text"><%= post.body %></p>
    </li>
  <% end %>
 </ul>

“高度：70px；宽度：自动；浮动：左”）%>

它能爬楼梯。为什么？我该怎么办

---

我的CSS只是一个引导程序。

这是因为

float:left

图像样式。解决此问题的一种方法是将

clearfix

类添加到

列表组项中

  <li class="list-group-item clearfix">
      <img src="//placehold.it/300x70" class="pull-left">
      <h5 class="list-group-item-heading">user</h5>
      <p class="list-group-item-text">body</p>
  </li>

用户
正文

---

demo：

很难说没有看到CSS。可能是垂直对齐：Tope问题。考虑使用Bootstrap来实现。