2016-02-01 113 views
-2

我试图将下面的代码转换为在Ruby 2.2.2和Rails 4.2.4上运行。我无法让图像锁定并保留文字。任何人都可以告诉我我的代码有什么问题吗?将此代码转换为Rails 4.2

下面是代码:

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

它应该是这个样子:

enter image description here

我的代码看起来是这样,但图像从文本分裂:

<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

+0

那么,错误的关闭锚点标签是什么? – Makoto

+0

也许这个问题的最好名称是这样的:“将HTML转换为Rails的问题”。 – monteirobrena

回答

2

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