grails에서 개별 요소를 대상으로 지정하는 방법 : render

Question

내 프로젝트에서 사용자가 좋아하는 영화, 책, 음악 등을 나타내는 이미지를 참조하는 grails g : render 태그를 만들었습니다. 내가 가지고있는 문제는 컬렉션의 스타일을 지정하는 것입니다. 음악과 같이 특정 컬렉션의 개별 이미지를 타겟팅 할 수 없습니다. 누군가가 특정 컬렉션을 위해 g : render 내에서 이미지를 타겟팅하는 방법을 찾도록 도와 줄 수 있습니까? gsp 파일과 템플릿 파일의 코드를 제공했습니다. 내 목표는 각 이미지가 각 이미지의 행으로 표시되도록 이미지를 스타일링하는 것이지만 float : "like_content"div에 남겨두면 전체 이미지는 개별 이미지가 아닌 플로트됩니다. 어떤 도움이라도 대단히 감사하겠습니다.

편집 : ID를 템플릿 이미지의 클래스로 변경해 보았습니다. 또한 ".like_content1 img"접근 방식을 시도했지만 나에게도 효과가 없습니다. 나의 궁극적 인 목표는 각 컬렉션에있는 5 개의 이미지가 각각의 행에 정렬되어있는 3 개의 다른 컬렉션 (영화, 음악, 도서)의 3 개의 행을 만드는 것입니다. 내가 어떻게 보이게 할 지에 대한 모형 이미지를 포함 시켰습니다.

GSP :

<div class="like_content1"> 

    <g:render template="favorites" collection="${movies}" var="fav"/> 

</div> 

<div class="like_content2"> 

    <g:render template="favorites" collection="${music}" var="fav"/> 

</div> 

<div class="like_content3"> 

    <g:render template="favorites" collection="${books}" var="fav"/> 

</div> 

TEMPLATE :

<div id="favdiv"> 
<g:if test="${fav != null }"> 
    <img id="favimg" src="${fav.picture}"> 
    <p id="favname">${fav.name}</p> 
</g:if> 
</div> 

CSS :

#favimg{ 
      width:150px; 
      height: 150px; 
      }    

      .like_content1{ 
      position: relative; 
      left: 100px; 
      bottom: 75px; 
      } 

      .like_content2{ 
      position: relative; 
      left: 110px; 
      bottom: 75px; 

      } 

      .like_content3{ 
      position: relative; 
      left: 425px; 
      } 

Answer 1

:

.like_content1 img { 
    float:left; 
} 

그리고 당신이 당신의 플로트를 지워야을 다음 줄 시작 :

<div class="like_content1"> 
    <g:render template="favorites" collection="${movies}" var="fav"/> 
    <br clear="all"/> 
</div> 

<div class="like_content2"> 
    <g:render template="favorites" collection="${music}" var="fav"/> 
    <br clear="all"/> 
</div> 

<div class="like_content3"> 
    <g:render template="favorites" collection="${books}" var="fav"/> 
    <br clear="all"/> 
</div> 

Answer 2

첫째, 템플릿의 요소에 ID를 사용하지 않는 당신 때문에 ' 동일한 HTML 페이지에 동일한 ID를 가진 요소가 두 개 이상 있어야합니다. 그러나 당신이 당신의 CSS

.like_content1 img { 
    float:left; 
} 

이 선택 클래스 like_content1 인 요소 내에서 발생하는 모든 IMG 태그를 일치에서 하위 선택기를 사용하여 원하는 것을 달성하기 위해.

Answer 3

내가 아는 한 .like_content의 이미지에 CSS 규칙을 적용해야합니다. 그래서, 대신

.like_content1{ 
    position: relative; 
    left: 100px; 
    bottom: 75px; 
} 

을 쓰는 당신은

.like_content1 img { 
    position: relative; 
    left: 100px; 
    bottom: 75px; 
} 

중요 사용 id="xxx"이 페이지에서 고유 태그 예약되어 있습니다. 귀하의 경우에는 class="xxx"으로 템플릿을 조정하십시오. 결과 HTML 페이지는이 템플릿을 여러 번 대체 할 것이므로

Answer 4

float 바깥 쪽 DIV 아닌 IMG

그래서 뭔가 같은, 당신은 당신의 이미지를 떠 필요

.like_content1 div { 
     float: left; 
    }