Css rails中的文本环绕图像

我试图在页面的左侧有一个图像，然后在它旁边的文本（在它的右边）有两行

目前我的代码是：

.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日期发布”和“婚礼日期：…”这两行文字就在一行中。这与图像的基线对齐，而不是位于顶部或中心

所以，问题是-如何让文本位于缩略图右侧的两行中

---

谢谢

这是一个CSS问题，而不是Rails问题（它使用Rails输出的数据是附带的）

---

CSS

我相信您正在寻找：

（我将为您编写纯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; }

“邮寄人：”
.评论作者{
显示：块；
背景：#ff0；
高度：自动；
垂直对齐：中间对齐；
}
.review_author>*{垂直对齐：中间；}
.阿凡达{
显示：内联块；
右边距：10px；
}
.info{显示：内联块；}
.info>*{display:block；}

您可能需要添加一些额外的类，如：

.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')}"

---

然后按照这样的方式设计它们：

Rich Peck的css比我的好得多，但是你明白了。另外，请注意缩进-

if

语句必须嵌套才能嵌套条件。