ListView 적용후 게시물이 겹쳐보이는 현상 관련 문의드립니다.

Question

ListView 적용후 그림들이 겹쳐져서 보입니다.. 어느 부분이 잘못되있는지 문의드립니다. 1. articleapp/templates/articleapp/list.html {% extends 'base.html' %} {% load static %} {% block content %} < style > .container div { width: 250px; background-color: antiquewhite; display: flex; justify-content: center; align-items: center; border-radius: 1rem; } .container img { width = 100%; border-radius: 1rem; } {% if article_list %} < div class = "container" > {% for article in article_list %} < a href = " {% url 'articleapp:detail' pk = article . pk %} " > {% include 'snippets/card.html' with article = article %} {% endfor %} < script src = " {% static 'js/magicgrid.js' %} " > {% else %} < div style = "text-align:center" > < h1 > Articles YET {% endif %} {% include 'snippets/pagination.html' with page_obj = page_obj %} < div style = "text-align:center" > < a href = " {% url 'articleapp:create' %} " class = "btn btn-dark rounded-pill col-3 mt-3 mb-3" > Create Article {% endblock %} pragmatic/templates/snippets/card.html < div > < img src = " {{ article . image . url }} " alt = "" > pragmatic/static/js/magicgrid.js var masonrys = document . getElementsByTagName ( 'img' ); for ( let i = 0 ; i < masonrys . length ; i ++) { masonrys [ i ]. addEventListener ( 'load' , function () { magicGrid . positionItems (); }, false ); } magicGrid . listen ();

유형주 · Answer

감사합니다 ㅎㅎ.. 역시 오타 문제였군요

Hyong Sok Park · Answer

안녕하세요. 질문 확인했습니다. 작성하신 코드 중에 에러가 CSS 부분에 있는것 같습니다. < style > .container div { width: 250px; background-color: antiquewhite; display: flex; justify-content: center; align-items: center; border-radius: 1rem; } .container img { width = 100%; border-radius: 1rem; } 위 부분 중에서 .container img { width = 100%; border-radius: 1rem; } 이 부분을 보시면 width = 100% 라고 적혀있는데, 해당 부분을 width : 100% 로 변경해주시길 바랍니다. CSS 구문 오류로 인해서 이미지의 크기가 100% 가 아니라 해당 이미지의 사이즈를 그대로 출력해서 생기는 문제로 보입니다. 답변이 도움이 되셨길 바랍니다! 좋은하루 보내시구요- 감사합니다-