我试图在页面的左侧显示一个图像,然后在它旁边(右侧)的文本分两行。
目前我的代码是:
.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')}"
有了这个,两行文本'Posted by x on x date'和'wedding date:..'在一行中。这与图像的基线对齐,而不是在顶部或中心。
那么,问题是 - 如何让文本位于缩略图右侧的两行中?
谢谢
最佳答案
这是一个 CSS 问题而不是 Rails 问题(它使用 Rails 输出数据的事实是巧合的)
CSS
我相信您正在寻找 css inline-blocks :
(我给你写纯css/html):
<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; }
关于css - rails 中的文字环绕图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22035173/