使用引导程序拉右对齐文本答案

【问题标题】：Aligning text with bootstrap pull-right使用引导程序拉右对齐文本
【发布时间】：2017-05-26 05:36:29
【问题描述】：

我想显示一张图片，在图片下方有左侧的时间和右侧的同一行的 cmets 计数。不幸的是，我的评论数显示在图片的右上角。

<% @articles.each do |article| %>
  <div class="well well-sm">
    <%= image_tag(article.attachments.first.attachment_url, class: "picture") %>
    <span class="flag pull-right"><i class="glyphicon glyphicon-comment")></i> <span class="badge">5</span></span>
    <h6>
      Posted by: Administrator
      <%= time_ago_in_words(article.created_at) %> ago.
    </h6>
    <p class="lead"><%= article.title %></p>          
    <%= simple_format(article.content[0,300]) %>
    <%= link_to "More", article_path(@article) %>
  </div>
<% end %>

【问题讨论】：

将img标签包裹在div中
工作感谢。这是因为
在使用 pull-right 时充当分隔符吗？
IMG 元素是内联的，这意味着除非它们是浮动的，否则它们将与文本和其他内联元素一起水平流动。而DIV 是块级元素：块级元素总是从新行开始并占据可用的全部宽度。
请发布此答案，我会接受。它简单明了。

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

【解决方案1】：

将img标签包裹在div中

HTML：

<div>
 <%= image_tag(article.attachments.first.attachment_url, class: "picture") %>
</div>

IMG 元素是内联的，这意味着除非它们是浮动的，否则它们将与文本和其他内联元素水平流动。然而 DIV 是一个块级元素：一个块级元素总是从一个新行并占据可用的整个宽度。

【讨论】：

【解决方案2】：

您可以使用以下方法获得相同的结果。

我发布了一个相同的示例。您可以在 span 标签中使用pull-right 类。

这是pull-right 和pull-left 类小提琴示例。

jsfiddle example

.wrapper {
    max-width: 230px;
    border: 1px solid #ddd;
    padding: 5px;
}

.image {
    width: 100%;
    text-align:center;
}
.image + .text {
    margin-top: 4px;
    width:100%;
    float:left;
}

.text span:nth-of-type(1) {
    float: left;
}

.text span:nth-of-type(2) {
    float: right;
}

<div class="wrapper">
 <div class="image">
 <img src="http://lorempixel.com/200/200/sports/" alt="">
 </div>
 <div class="text">
 <span>time</span><span>comment</span>
 </div>
</div>

【讨论】：