css - Rails - 如何在每隔一行中显示图像及其内容的左右布局

Question

我想循环遍历每个帖子并在每隔一行中显示图像及其内容的左右布局

像这样Theme基本上 html 是:

<div class="container">

    <div>
    <div class="images"><img src="image1"></div>
    <div class="images-content">content 1 here</div>
    </div>

    <div>
    <div class="images images-right"><img src="image2"></div>
    <div class="images-content images-content-right">content 2 here</div>
    </div>

   <div>
    <div class="images"><img src="image3"></div>
    <div class="images-content">content 3 here</div>
    </div>

    <div>
    <div class="images images-right"><img src="image4"></div>
    <div class="images-content images-content-right">content 4 here</div>
    </div>

   <div>
    <div class="images"><img src="image5"></div>
    <div class="images-content">content 5 here</div>
    </div>

    <div>
    <div class="images images-right"><img src="image6"></div>
    <div class="images-content images-content-right">content 6 here</div>
    </div>


 </div> 

我试过这个cycle例子

<% @posts.each do |post| %>

  <div class="<%= cycle('images', 'images images-right') %>">
    Image here
  </div>

<% end %>

但问题是如何添加与图像相关的相应内容 div 类

Answer 1

您可以使用 with_index将类动态添加到您的奇数索引帖子。

此外，请更喜欢使用 image_tag而不是使用原始 HTML 来创建 <img>标签。

<div class="container">
  <% @posts.each.with_index do |post, index| %>
    <div class="images <%= 'images-right' if index.odd? %>"><%= image_tag post.image %></div>
    <div class="images-content <%= 'images-content-right' if index.odd? %>"><%= post.content %></div>
  <% end %>
<div>