无法制作可点击的元素，RoR

Question

我的根页面上有一些图片和文字，因此访问者可以点击图片或文字，然后转发到我应用的所需部分。

我的基本HTML代码

   <div class="tprod">
      <div class="titimg"><%= image_tag('atkr_1.jpg') %></div>
      <div class="text">
         <div class="antr">
            <h2><%= I18n.t 'Waste_recycling_equipment'%></h2>
         </div>
    <%= I18n.t 'waste_intro_start' %> 
      </div>
      <%= link_to (I18n.t 'read_more'),products_path(:category => @waste_root.name) %>
   </div>

当我尝试为image_tag添加link_to时，图像会突然改变位置。

<div class="tprod">
      <div class="titimg"> <%= link_to image_tag('energ_1.jpg') %>  </div>
      <div class="text">
         <div class="antr">
            <h2><%= I18n.t 'Energy_wood_machinery'%></h2>
         </div>
        <%= I18n.t 'energo_intro_start' %> 
      </div>
     <%= link_to (I18n.t 'read_more'),products_path(:category => @energy_root.name) %>
   </div>

看起来像this

我想知道这是因为现在它是与image_tag结合的链接元素所以它有不同的CSS格式？

申请表可用here

Answer 1

它在Chrome上为我工作：

---

<强>格式

您可能遇到的问题是CSS，而不是Rails

在查看了您的图片之后，我会说问题可能与您使用float: left;

有关

float基本上将元素视为内联项，这意味着如果其宽度/结构在最小程度上不一致，则可能会导致像您一样的问题。

要解决此问题，我强烈建议您使用旧的<table>标记。它可能看起来很古老，但它肯定是你在这里得到的：

<table class="items">
   <tr>
       <% @items.each do |item| %>
           <td><%= image_tag item.image.url %></td>
       <% end %>
   </tr>
   <tr>
       <% @items.each do |item| %>
           <td><%= item.description %></td>
       <% end %>
   </tr>
</table>

对于<table>的使用，这可能会不受欢迎，但我相信它会对你所拥有的内容起作用。

Answer 2

这是因为你的#content .mainprods .tprod a css会影响您在图片周围创建的锚标记。

您需要使css更具体，以便仅在底部指定锚点。例如，如果您将:class => "read-more"添加到底部link_to，则可以将css选择器更改为#content .mainprods .tprod a.read-more，并仅设置底部链接的样式。对此有很多不同的方法。

另外，(I18n.t 'read_more')是不好的做法。它应该是I18n.t('read_more');）