将这段代码转换为Rails4.2 - Converting this code to Rails 4.2

- 此内容更新于:2016-02-01
主题:

我想把下面的代码运行在2.2.2Ruby和Rails4.2.4。我不能得到图像锁定和文本。谁能告诉我我的代码有什么问题吗?这是代码:它应该是这样的:我的代码是这样的,但从文本图像分割:

原文:

I am trying to convert the following code to run on Ruby 2.2.2 and Rails 4.2.4. I can't get the image to lock and stay with the text. Can anyone tell me what is wrong with my code?

Here is the code:

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

It is supposed to look like this:

enter image description here

My code looks like this but the image is split off from the text:

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

enter image description here

楼主:与错误的关闭锚标签是什么?

(原文:So what's with the misplaced closing anchor tags?)

网友:也许最好的名字的问题是类似的:“将HTML转换为Rails的问题。

(原文:Perhaps the best name for that question would be something like: "Problem converting HTML to Rails`.)

解决方案:
你有一些问题当关闭div和更好地利用。试试这个:
原文:

You have some problems when closing divs and it's better use link_to. Try this:

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