Rails -如何在每隔一行显示图像及其内容的左右布局
Rails -如何在每隔一行显示图像及其内容的左右布局
提问于 2018-08-03 05:38:23
我想循环通过每个帖子，并显示左右布局的图像和它的内容在每隔一行
像这样的Theme，基本上就是：
<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类
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-03 10:03:18
您可以使用with_index将类动态添加到奇数索引的帖子中。
此外，请更喜欢使用image_tag而不是原始的超文本标记语言来创建<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>Stack Overflow用户
发布于 2018-08-03 06:18:24
它取决于您的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 %>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51662508
复制相关文章
相似问题