【问题标题】: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 相同,只是没有 &lt;% %&gt; 和结束标签:(某种 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 向左浮动。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-12-09
    • 2011-06-19
    • 2013-09-23
    • 1970-01-01
    • 1970-01-01
    • 2012-11-18
    • 2011-09-30
    • 2012-10-27
    相关资源
    最近更新 更多