在導軌中環繞圖像的文本

Question

我試圖在頁面的左側顯示一個圖像，然後在兩行上顯示它旁邊的文本（正確）。

目前我的代碼是：

.review_author 
- if review.bride.has_avatar? 
    = filepicker_image_tag review.bride.avatar, w:50, h:50, fit: 'clip' 
    = "Posted by" 
    =link_to review.author, bride_reviews_path(review.bride), style: 'color: #E62B8A' 
    = "on #{review.created_at.strftime("#{review.created_at.day.ordinalize}" " %b %Y")}" 
    - if review.bride.wedding_date 
    = "Wedding date: #{review.bride.wedding_date.to_time.strftime('%b %Y')}" 

有了這個，兩行文字「發佈用x日x」和「婚禮日期：..」是在一行在一起。這與圖像的基線一致，而不是位於頂部或中心。

所以，問題是 - 如何讓文本位於縮略圖右側的兩行？

感謝

Answer 1

這是一個CSS的問題不是一個Rails問題的更多（它使用Rails的輸出數據的事實是共同附帶）

---

CSS

我相信你」重新尋找css inline-blocks：

（我會爲你寫純css/html）：

http://jsfiddle.net/5Yk6e/

<div class="review_author"> 
    <% if review.bride.has_avater? %> 
     <%= filepicker_image_tag review.bride.avatar, w:50, h:50, fit: 'clip', class: 'avatar' %> 
     <div class="info"> 
      <span>"Posted By:"</span> 
      <%= link_to review.author, bride_reviews_path(review.bride), style: 'color: #E62B8A' %> 
     </div> 
    <% end %> 
</div> 

.review_author { 
    display: block; 
    background: #ff0; 
    height: auto; 
    vertical-align: middle; 
} 
.review_author > * { vertical-align:middle; } 
.avatar { 
    display: inline-block; 
    margin-right: 10px; 
} 
.info  { display: inline-block;} 
.info > * { display: block; } 

Answer 2

您可能需要一些額外的類添加像這樣：

.review_author 
    - if review.bride.has_avatar? 
    .review_image 
     = filepicker_image_tag review.bride.avatar, w:50, h:50, fit: 'clip' 
    .review_info 
     %p 
     = "Posted by" 
     =link_to review.author, bride_reviews_path(review.bride), style: 'color: #E62B8A' 
     %p 
     = "on #{review.created_at.strftime("#{review.created_at.day.ordinalize}" " %b %Y")}" 
     - if review.bride.wedding_date 
      = "Wedding date: #{review.bride.wedding_date.to_time.strftime('%b %Y')}" 

然後他們的風格，像這樣：http://jsfiddle.net/JRLzz/