使用動態ERB ID創建個人div

Question

我試圖用我的ERB（每個都有自己的鏈接在div中）製作兩個單獨的div（稱爲sample-pack-button），但此刻div並不是' t是單獨創建的，並且只有一個包含兩個鏈接的div。這裏是我的代碼：

<div id="sample-pack-container"> 
    <div id="sample-pack-background"> 
    <% @sample_packs.each do |sample_pack| %> 
     <div class="sample-pack-button" id="sample-pack-<%= sample_pack.name %>"> 
     <%= link_to (sample_pack.name), play_sample_pack_path(sample_pack) %> 
     <% end %> 
     </div> 
    </div> 
</div> 

因此，在這一刻，有我一個DIV包含鏈接「KIT1」和「KIT2」，而應該是在每一個鏈接兩個單獨的div。

當我的HTML元素進行檢查，我發現id="sample-pack-kit2"嵌套在id="sample-pack-kit1"這我想不應該是這樣的：

<div id="sample-pack-container"> 
<div id="sample-pack-background"> 
    <div class="sample-pack-button" id="sample-pack-kit1"> 
    <a href="/sample_packs/1/play">kit1</a> 
    <div class="sample-pack-button" id="sample-pack-kit2"> 
     <a href="/sample_packs/2/play">kit2</a> 
    </div> 
</div> 
</div> 

我不知道這是一個結構性的我的ERB問題或我的CSS問題。我的CSS是：

#sample-pack-container { 
    max-width: 913px; 
    margin-top: 300px; 
    margin-left: 600px; 
} 

#sample-pack-background { 
    position: relative; 
} 

.sample-pack-button { 
    position: absolute; 
    width: 140px; 
    height: 140px; 
    background-color: #8B959E; 
} 

我試着走動我ERB通過將class="sample-pack-button"上述.each方法，使一個新的p class="a-sample-pack-button' id="sample-pack-<%= sample_pack.name %>"，但我仍然得到只是一個DIV。

因此，總之，我試圖創建兩個獨特的div，其中包含一個鏈接到他們各自的樣本包。

Answer 1

您需要在sample-pack-button的</div>關閉後移動end。

<div id="sample-pack-container"> 
    <div id="sample-pack-background"> 
    <% @sample_packs.each do |sample_pack| %> 
     <div class="sample-pack-button" id="sample-pack-<%= sample_pack.name %>"> 
     <%= link_to (sample_pack.name), play_sample_pack_path(sample_pack) %> 
     </div> 
    <% end %> 
    </div> 
</div>