用引導拉動右對齊文字

我想顯示圖像，圖像下有時間到左邊，在同一行右邊有一個註釋的計數。不幸的是，我的評論數量出現在圖片的右上角。用引導拉動右對齊文字

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

來源

2017-05-26 Dercni

將'img'標籤包裹在'div'中 –

謝謝。這是因爲

在使用拉右時用作分隔符嗎？ – Dercni

IMG元素是內聯的，這意味着除非它們被浮動，否則它們將與文本和其他內聯元素水平流動。而'DIV'是塊級元素：塊級元素總是從新行開始並佔用全部可用的寬度。 –

包裹img標籤中div

HTML：

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

IMG元素是內聯的，這意味着除非它們被浮動，否則它們將與文本和其他內聯元素水平流動。而 DIV是塊級元素：塊級元素始終從新行開始，佔用全部可用寬度。

來源

2017-05-26 11:13:29

您可以使用下面的方法獲得相同的結果。

我發佈了一個相同的例子。您可以在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>

來源

2017-05-26 06:25:31 LKG

用引導拉動右對齊文字

回答

相關問題