Створення нового стовпця фундаменту Zurb для кожного зображення з циклічних зображень у вигляді рельєфу - css, ruby-on-rail, zurb-foundation

Я використовую Zurb Foundation для завантаження мого додатку. В даний час я маю щось подібне до того, що відбувається у поданні

<h3>Friends</h3>
<div class="row">
<div class="large-12 columns">
<div class="row">
<div class="large-3 columns">
<div class="friends">
<% @friends.each do |friend| %>
<tr>
<td><%= friend.full_name %></td><br/>
<td><%= image_tag(friend.image_url)%></td><br/>
</tr>
<% end %>
</div>
</div>
</div>
</div>
</div>

Її відображення декількох фотографій. Я намагаюся створити "великі-3 стовпчики" для кожного зображення і не відображати всі фотографії всередині одного "великого-3 стовпців". Зображення повинні закінчуватися один з одним один до одного.

Я в основному зосереджуюсь на рубінах на рейках і менше на передній частині. У моєму додатку.css я додав це

.friends {
display: inline-block;
}

спробувати зробити фотографії відбуватися поруч.

Відповіді:

Я думаю, що те, що ви шукаєте, може бути щось подібне.

<h3>Friends</h3>
<div class="row">
<div class="large-12 columns">
<% @friends.each do |friend| %>
<div class="large-3 columns">
<div class="friends">
<tr>
<td><%= friend.full_name %></td><br/>
<td><%= image_tag(friend.image_url)%></td><br/>
</tr>
</div>
</div>
<% end %>
</div>
</div>

Для цього прикладу вам не потрібно вставляти рядок. Розміщуючи стовпчик .large-3 всередині кожної петлі, для кожного об'єкта друга виводиться новий стовпець.

За замовчуванням стовпці "Фундації" будуть плавати вліво, тому вам не потрібно додавати щось для стовпців, які потрібно відображати, як ви хочете.

Сподіваюся, це допоможе.