Django 템플릿 질문 입니다.
조회수 2322회
장고 템플릿 관련 질문을 다시 한번 올립니다.
우선..아래는 제 코드 입니다.
<table>
<tr>
{% for entry in actress %}
<td>{{entry.name}}</td>
{% endfor %}
</tr>
<tr>
{% for entry in actress %}
<td><img src="static/enActress/{{entry.image_paths}}"}} class="img-circle"></td>
{% endfor %}
</tr>
</table>
저의 의도는 사람이름(위), 사람사진(아래)로 매칭시켜서 테이블에 넣는 것 입니다. 그런데 한 td에 변수 전체를 넣으니 브라우저에 스크롤바가 생기도록 옆으로 이름과 사진 테이블이 죽 나열되어 div가 브라우저 해상도 이상으로 늘어나 버렸습니다.
컨테이너 div 크기에 맞게끔 변수 리스트가 줄바꿈 되게 하려면 어떻게 해야 하는지 궁금합니다. 굉장히 간단할 것 같은데... 아무리 찾아봐도 모르겠네요 ㅠㅠ
-
(•́ ✖ •̀)
알 수 없는 사용자
2 답변
-
방법1. HTML파일을 텍스트의 나열이 아니라, 내가 원하는대로 배치하고 싶다면 css를 이용해야 합니다. css중에서도 원하는 기능을 구현하시려면 Flexbox를 써서 자동으로 줄바꿈을 해 주는 방법이 있습니다. 컨테이너 div와 item에 flexbox를 적용하고, actress마다 하나의 item div를 생성해서 넣어주는 방법입니다. 위에 첨부한 링크를 보시면 어떻게 되는지 이해가 되실겁니다.
방법2. table을 그대로 이용하면서 한 줄에 3개씩 나오게 하면서 줄을 바꿔 주시려면
<table> <tr> {% for i, entry in enumerate(actress) %} <td> {{entry.name}}</br> <img src="static/enActress/{{entry.image_paths}}"}} class="img-circle"> </td> {% if i%3 == 0 %} </tr><tr> {% endif %} {% endfor %} </tr> </table>
이렇게 3번째 아이템마다 줄을 바꿔 줄 수 있습니다. 3대신 원하는 숫자로 갯수를 지정해 보세요.
-
해당 문제는 반복문이 끝날 때 까지 td가 계속해서 만들어지는데도 불구하고 적정 숫자에 맞춰 줄내림을 해주는 처리를 해주지 않은 데에 있다고 생각합니다.
질문자님이 직면한 문제의 해결책은
만약 인덱스가 5이상(혹은 임의의 숫자)일 경우 줄을 내려 출력한다
는 전제 조건을 생각하셔야합니다.만약
이라는 단어는 조건문을 사용하면 해결할 수 있으며
인덱스가 5이상
이라는 조건은 django에서 제공하는forloop.counter
를 이용하면 해결 할 수있습니다.
댓글 입력