css - 在每次迭代的不同位置显示信息

Question

我正在遍历数据库并在同一行的两列中显示每个结果。目前，图像始终显示在每一行的第一列中。我想交替使用这个，所以图像在右边，描述在左边。

  <% @guide.in_groups_of(2, false).each do |guide_row| %>
    <% for guide in guide_row %>
    <div class='row guide-row'>
        <div class="col-md-6">
            <%= link_to image_tag(guide.image(:large)), guide.image(:xlarge), :class => 'guide-image' %>
        </div>
        <div class="col-md-6 guide-list ">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="  #info_<%= guide.id %>">
            <h2 class='guide'><%= guide.title %></h2>
            </a>
            <h4 class='guide'>From <%= guide.date_starting.strftime("%a %b #{guide.date_starting.day.ordinalize}") %> to <%= guide.date_ending.strftime("%a %b #{guide.date_starting.day.ordinalize}") %></h4>
            <div class='col-md-12'>
            </div>
            <div class="accordion" id="categories">
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle btn glyphicon" data-toggle="collapse" data-parent="#accordion" href="    #info_<%= guide.id %>">
                        <i class='glyphicon glyphicon-info-sign info-icon'></i>
                        </a>
                        <% unless guide.extra_info.nil? %>
                        <%= link_to ' ', guide.extra_info, :class => 'glyphicon glyphicon-globe info-icon'  %>
                        <% end %>
                        <div id="info_<%= guide.id %>" class="accordion-body collapse">
                            <div class="acccordion-inner">
                                <% if guide.description.empty? %>
                                <h4>No description available</h4>
                                <% else %>
                                <p class='guide-description'><%= guide.description %></p>
                                <% end %>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

提前致谢。

Answer 1

我不确定你是如何遍历你的行的，从上面看并不是很清楚。 但我建议您创建 2 个部分(小 erb 文件)，一个用于偶数行，一个用于奇数行。然后根据您的迭代器，您将呈现偶数部分或奇数部分，每个部分的图像和文本相互交换。

基本上是这样的:(未经测试，但应该给你想法。

<%= @even_row? ? render 'shared/even_row' : render 'shared/odd_row' %>

要弄清楚哪对是偶数还是奇数，你可以这样做:

 <% @guide.in_groups_of(2, false).each_with_index do |guide_row, index| %>

<%= index.even? ? render 'shared/even_row' : render 'shared/odd_row' %>

然后您可以使用 index.even? 来确定要渲染的部分。

希望对你有帮助