ROR에 정렬되지 않은 목록 배치

다음 목록을 레일스 앱에 표시하려고합니다. 나는 각 사용자의 이미지를 표시하고 순위에 따라 내림차순으로 각 "핀"을 나열합니다. 각 사용자를 별도의 행에 표시하도록 코딩 된 올바른 CSS를 얻을 수없는 것 같습니다. 다음 각 사용자는 이전 목록에 대해 왼쪽으로 떠 있습니다.ROR에 정렬되지 않은 목록 배치

이

<% @users.each do |user| %> 
    <ul class="ver2"> 
     <li><div><%= link_to (image_tag user.image(:small)), user %><h3><%= user.name %></h3></div></li> 
     <% user.pins.order('rank DESC').each do |pin| %> 
      <% if pin.date == 2013 %> 
       <li><div class="square"><%= link_to (image_tag pin.image(:medium)), pin %><br/> #<%= pin.rank %> - <%= truncate(pin.album, length:20) %> - <%= pin.artist %> -</div></li> 
      <% end %> 
     <% end %> 
    </ul> 
<% end %>

CSS : 명확한를 추가

.ver2 li { 
    list-style: none; 
    display: inline-block; 
    width: 150px; 
    float: left; 
} 
.ver2 img { 
    height: 75px; 
    width: 75px; 
} 
.square { 
    width: 150px; 
    height: 150px; 
    text-align: center; 
}

출처

2013-11-25 Tony Tambe

<% = link_to (image_tag user.image (: small)), 사용자 %>는 또는 을 생성합니까? 루비 코드를 제거 할 수 있습니까? 이 CSS 문제와는 완전히 관련이 없습니다. 프론트 엔드에서 생성 된 HTML을 복사하여 여기에 붙여 넣으십시오. 감사. –

이것이 현재 생성 된 마크 업입니까? http://jsfiddle.net/bxK7t/ –

예, 감사합니다. @ thargor는 내가 분명히 필요로하는 것을 가지고 있었다 : 왼쪽. –

시도가 다음 .VER 리튬 요소에 남아 여기 내 코드입니다.

출처

2013-11-25 01:09:03 thargor

ROR에 정렬되지 않은 목록 배치

답변

관련 문제