Question

我正在尝试使用我的ERB创建两个单独的div（称为sample-pack-button）（每个div在div中都有自己的链接），但目前div不是单独创建的，只有一个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>

所以目前，我有一个包含链接'kit1'和'kit2'的div，而应该有两个单独的div，每个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;
}

我已尝试将class="sample-pack-button"置于.each方法之上并制作新的p class="a-sample-pack-button' id="sample-pack-<%= sample_pack.name %>"，但我仍然只获得了一个div。

总而言之，我正在尝试创建两个独特的div，其中包含指向各自样本包的链接。

Answer 1

您需要在end的结束</div>之后移动sample-pack-button。

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

使用动态ERB Id创建单个div

1 个答案: