Question

我想显示一个图像，在图像下方有左边的时间，右边的注释计数在同一行。不幸的是，我的评论计数出现在图片的右上角。

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

Answer 1

您可以使用以下方法获得相同的内容。

我发布了相同的例子。您可以在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>

Answer 2

将img标记包裹在div

中

HTML：

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

IMG元素是内联的，这意味着除非它们是浮动的将与文本和其他内联元素水平流动。而 DIV是块级元素：块级元素始终以a开头新线并占据可用的全宽。

将文本与引导程序拉向右对齐

2 个答案: