将引导程序内容对齐缩略图中的图像右侧

时间:2012-12-29 21:14:22

标签: css ruby-on-rails twitter-bootstrap

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

我的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来坐在图像的右侧

1 个答案:

答案 0 :(得分:6)

您可以将图像和标题浮动在缩略图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>