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

Question

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

像这样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

它取决于您的 Post 模型具有哪些属性。大概它有 content 和 image 属性？

<% @posts.each do |post| %>
  <div>
    <div class="<%= cycle('images', 'images images-right') %>">
      <%= post.image %>
    </div>
    <div class="<%= cycle('images-content', 'images-content images-content-right') %>">
      <%= post.content %>
    </div>
  </div>
<% end %>

Answer 2

您可以使用 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>

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

Rails - how can I display left and right layout for image and its content in every other row

css

ruby

rubygems

ruby-on-rails

ruby-on-rails-4