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

发布于 2024-10-30 08:10:56 字数 327 浏览 1 评论 0原文

我有这个图像链接：

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

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

在此处输入图像描述

原文

I have this image link:

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

and I want to wrap a div containing 1. text and 2. a list with a link and text around that image link. I want the image to be on the left, and the div to be on the right wrapping around the image.

enter image description here

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

∞梦里开花 2024-11-06 08:10:56

假设您不需要 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>

Assuming you don't need any of the fancier features offered by the link_to helper, the easy answer is to just use an anchor tag directly.

<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>

回复收藏 0 原文

尴尬癌患者 2024-11-06 08:10:56

你会关心我是否将它发布在 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

并且不要忘记清除浮动li!

然后在你的CSS中，只留下浮动comment_image和用户评论。

would you care if i posted it in HAML(same thing as erb just without the <% %> and closing tags:(sort of pseudo code for 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

AND dont forget to clear your float on the li!

then in your css, just float comment_image and user-comments left.

回复收藏 0 原文

~没有更多了~