Question

Currently my code results in a view that looks like this:

Lessons Start Now!
x
x
x
x
x
x

(where x = image)

I was wondering how I can make it display like this:

Lessons Start Now!
x   x   x
x   x   x

Here is my code for the index.html.erb

<h1>Lessons Start Now!</h1>
<% @lessons.each do |lesson| %>
    <%= image_tag(lesson.image, :size => "100x50") %><br />
    <%= lesson.subject %><br />
<% end %>
<%= link_to 'New Lesson', new_lesson_path %>

The only thing I can think of is writing a for loop that has a count. It will insert the first images into one div class then once the count = 3, it would insert the next 3 into a different div. Maybe something special can be done using ul and li, or perhaps there is a rails way, any help would be appreciated.

Answer 1

You have to use CSS to do what you desire, let’s say this is your template:

<h1>Lessons Start Now!</h1>
<% unless @lessons.empty? %>
<ul class="lessons">
<% @lessons.each do |lesson| %>
    <li>
    <%= image_tag(lesson.image, :size => "100x50", :class => "thumbnail") %>
    <p class="subect"><%= lesson.subject %></p>
    </li>
<% end %>
</ul>
<% end %>
<%= link_to 'New Lesson', new_lesson_path %>

And this would be your CSS then:

.lessons {
  /* this is needed for the parent 
     to have height. read more 
     http://css-tricks.com/all-about-floats/
  */
  overflow:hidden;
  /* adjust width of this element
     if its width is not limited by its parent
  width: 300px;
  */
}
    .lessons li {
        /* add margins and paddings as you wish */
        float:left;
    }