你如何让这个 div 环绕图像链接？答案

【问题标题】：How do you get this div to wrap around an image link?你如何让这个 div 环绕图像链接？
【发布时间】：2011-04-06 06:15:55
【问题描述】：

我有这个图片链接：

<%= link_to image_tag(comment.user.profile.photo.url(:tiny)), profile_path(comment.user.profile), :class => "comment_image" %>

我想包装一个 div，其中包含 1. 文本和 2. 一个列表，其中包含一个链接和该图像链接周围的文本。我希望图像在左侧，而 div 在右侧环绕图像。

【问题讨论】：

你需要做什么的截图？
很抱歉图像质量不好...也忽略奇怪的测试 cmets 大声笑
所以文本和页脚（评论文本下方的小链接和文本）应该环绕图像

标签： ruby-on-rails css ruby ruby-on-rails-3 positioning

【解决方案1】：

假设您不需要 link_to 助手提供的任何更高级的功能，简单的答案就是直接使用锚标记。

<a href="<%= profile_path(comment.user.profile) %> class="comment_image">
  <div>
    Some stuff -- whatever
    <%= image_tag(comment.user.profile.photo.url(:tiny)) %>
    Some more stuff -- ya know...
  </div>
</a>

【讨论】：

谢谢，但我更喜欢使用 link_to 助手
您可以使用链接帮助器来完成这项工作，但代码会更丑陋且更难维护。它没有特别好的理由添加了另一层抽象。不过，您可以通过对每个文字字符串使用 html_safe 方法来连接包含文字 HTML 的文本字符串。 "...".html_safe.
然后我只是将 div 和 .comment_image 浮动到左边？
是的，它们都向左浮动

【解决方案2】：

你会在意我是否在 HAML 中发布它（与 erb 相同，只是没有 <% %> 和结束标签：（某种 html 的伪代码）

%ul
  %li
    = link_to image_tag(comment.user.profile.photo.url(:tiny)), profile_path(comment.user.profile), :class => "comment_image"
    %div.user-comments
      comment
      username etc

  %li
    rinse-repeat

并且不要忘记清除你的浮子！

然后在你的 css 中，将 comment_image 和 user-cmets 向左浮动。

【讨论】：