テキストをブートストラップのプル - 右に合わせる

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

div

HTMLでimgタグをラップ：

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

IMG要素は浮動小数点型でない限り、 はテキストやその他のインライン要素とともに水平方向に流れます。 DIVはブロックレベル要素です。ブロックレベルの要素は、常に新しい行で から始まり、利用可能な全幅を占めます。

Answer 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>