Question

我有以下数组：

[{title, description, body, image}, 
 {title2, description2, body2, image2}, 
 {title3, description3, body3, image3}, 
 {title4, description4, body4, image4}]

在我的ERB中，我试图将前两个放在同一行。接下来的两行就在下一行。基本上将图像1和2并排放在一行上，图像3和4并排放在下面的行上。

所以我有以下内容：

<% @post.each_slice(2) do |post, b| %>
  <% if b.sort_order != 5 %>
    <%= image_tag b.post_image %>
    <%= b.title %>
    <%= b.description %>
    <%= b.body %>
  <% end %>
<% end %>

酷这让我获得了数组中的2位和4位，但我真的很想看到：

[1, 2]
[3, 4]

所以我把它改成了：

<% @post.each_slice(2) do |post, b| %>
  <% if b.sort_order != 5 %>
    <%= image_tag post.post_image %>
    <%= image_tag b.post_image %>
  <% end %>
<% end %>

很酷，现在我得到了[1,2] [3,4]。如何让它显示：

Title 1         Title 2
Description 1   Description 2

Answer 1

尝试以下方法：

<% @post.each do |post| %>
  <% if post.sort_order != 5 %>
    <div class="half-width">
      <%= image_tag post.post_image %>
      <%= post.title %>
      <%= post.description %>
      <%= post.body %>
    </div>
  <% end %>
<% end %>

并添加以下CSS：

.half-width {
  display: inline-block;
  width: 50%;
}

请注意，50％的宽度会考虑任何空白，因此它可能仍会分割线条。玩一玩，看看你的想法 - 多一点信息here。

Answer 2

所以解决方案实际上是一个CSS问题。我＆＃34;解决了它＆＃34;通过添加进一步分解为：

<% @post.each_slice(2) do |post, b| %>
<% if b.sort_order != 5 %>

  <div class="col-md-6">
  <%= image_tag post.post_image %>
  </div>

  <div class="col-md-6">
  <%= image_tag b.post_image %>
  </div>

 <% end %>

基本上我只是把它看作是在erb中混在一起的白痴。

如何在ERB中使用each_slice来设置行？

2 个答案: