将此代码转换为Rails 4.2

Question

我正在尝试将以下代码转换为在Ruby 2.2.2和Rails 4.2.4上运行。我无法将图像锁定并保留文本。谁能告诉我我的代码有什么问题？

以下是代码：

<div id="portfolio">
  <!-- Add the above used filter names inside div tag. You can add more     than one filter names. For image lightbox you need to include "a" tag pointing to image link, along with the class "prettyphoto". -->
  <div class="element one three"><a href="img/portfolio/1.jpg" class="prettyphoto">
    <img src="img/portfolio/1.jpg" alt="" />
    <!-- Portfolio caption -->
    <div class="pcap bred">
      <h4>Lorem ipsum dolor</h4>
      <p>Sed justo dui, scelerisque ut vel, eleifend id erat.</p>
    </div>
  </a>
</div>
<div class="element two one"><a href="img/portfolio/2.jpg" class="prettyphoto">
  <img src="img/portfolio/2.jpg" alt="" />
  <div class="pcap borange">
    <h4>Lorem ipsum dolor</h4>
    <p>Sed justo dui, scelerisque ut vel, eleifend id erat.</p>
  </div>
</a>
</div>
<div class="element three five"><a href="img/portfolio/3.jpg" class="prettyphoto">
  <img src="img/portfolio/3.jpg" alt="" />
  <div class="pcap blightblue">
    <h4>Lorem ipsum dolor</h4>
    <p>Sed justo dui, scelerisque ut vel, eleifend id erat.</p>
  </div>
</a>
</div>

应该看起来像这样：

我的代码看起来像这样，但图像与文本分开：

<div id="portfolio">
  <!-- Add the above used filter names inside div tag. You can add more than one filter names. For image lightbox you need to include "a" tag pointing to image link, along with the class "prettyphoto". -->
  <div class="element one three">
    <a><%= image_tag("portfolio/1.jpg", class: "prettyphoto") %>
      <!-- Portfolio caption -->
      <div class="pcap bred">
        <h4>Lorem ipsum dolor</h4>
        <p>Sed justo dui, scelerisque ut vel, eleifend id erat.</p>
      </div>
    </a>
</div>
<div class="element two one">
  <%= image_tag("portfolio/2.jpg", class: "prettyphoto") %>
  <div class="pcap borange">
    <h4>Lorem ipsum dolor</h4>
    <p>Sed justo dui, scelerisque ut vel, eleifend id erat.</p>
  </div>
  </a>
</div>

Answer 1

关闭div时遇到一些问题，最好使用link_to。试试这个：

<div id="portfolio">
  <!-- Add the above used filter names inside div tag. You can add more than one filter names. For image lightbox you need to include "a" tag pointing to image link, along with the class "prettyphoto". -->
  <div class="element one three">
    <%= link_to "#" do %>
      <%= image_tag("portfolio/1.jpg", class: "prettyphoto") %>
      <!-- Portfolio caption -->
      <div class="pcap bred">
        <h4>Lorem ipsum dolor</h4>
        <p>Sed justo dui, scelerisque ut vel, eleifend id erat.</p>
      </div>
    <% end %>
  </div>
  <div class="element two one">
    <%= link_to "#" do %>
      <%= image_tag("portfolio/2.jpg", class: "prettyphoto") %>
      <div class="pcap borange">
        <h4>Lorem ipsum dolor</h4>
        <p>Sed justo dui, scelerisque ut vel, eleifend id erat.</p>
      </div>
    <% end %>
  </div>
</div>