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

列表和“左拉”使楼梯

1 个答案: