html - 列表和 "pull-left"使楼梯

Question

我想发表博客评论之类的东西。评论左侧有用户头像和用户名。我的代码如下。

<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>

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

我的 CSS 只是 Bootstrap 。

Answer 1

它的发生是因为 float:left 图像样式。解决此问题的一种方法是将 clearfix 类添加到 list-group-item

  <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>

演示:http://www.bootply.com/2kMdHMnaJl