css - 将 Bootstrap 内容与缩略图中图像的右侧对齐

Question

我无法在引导缩略图中将标题与图像右侧对齐

我的 HTML

  <div class="container">
   <div class="row">
    <div class="span8 offset2">
     <% @response.each do |f| %>
     <% f.each_pair do |k, v| %>
     <h3 class="smallTitle">Available on&nbsp;<%= k %></h2>
      <% v.each do |film| %>

     <div class="thumbnail">
      <img src="http://placehold.it/180x200">
       <div class="caption">
        <%= link_to film[1], film[0] %> : <%= link_to "remind me", "#", :class => 'remind' %>
       </div>
      </div>
     <% end %>
    <% end %>
   <% end %>
  </div>
 </div><!--Row-->
</div><!--/container-->

所以目前我的图像在左侧，而标题在图像下方.. 有没有一种简单的 CSS 方法可以让 div 的标题位于图像的右侧

Answer 1

您可以在缩略图 div 中浮动图像和标题

 <div class="thumbnail clearfix">
  <img src="http://placehold.it/180x200" class="pull-left">
   <div class="caption" class="pull-right">
    <%= link_to film[1], film[0] %> : <%= link_to "remind me", "#", :class => 'remind' %>
   </div>
  </div>