-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
ListView 적용후 게시물이 겹쳐보이는 현상 관련 문의드립니다.
21.09.27 18:44 작성 조회수 139
0
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;
}
</style>
{% 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 %}
</a>
{% endfor %}
</div>
<script src="{% static 'js/magicgrid.js' %}"></script>
{% else %}
<div style="text-align:center">
<h1> Articles YET </h1>
</div>
{% 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
</a>
</div>
{% endblock %}
pragmatic/templates/snippets/card.html
<div>
<img src="{{ article.image.url }}" alt="">
</div>
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();
답변을 작성해보세요.
0
0
Hyong Sok Park
지식공유자2021.09.27
안녕하세요.
질문 확인했습니다.
작성하신 코드 중에 에러가 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;
}
</style>
위 부분 중에서
.container img {
width = 100%;
border-radius: 1rem;
}
이 부분을 보시면 width = 100% 라고 적혀있는데,
해당 부분을 width: 100% 로 변경해주시길 바랍니다.
CSS 구문 오류로 인해서
이미지의 크기가 100% 가 아니라
해당 이미지의 사이즈를 그대로 출력해서
생기는 문제로 보입니다.
답변이 도움이 되셨길 바랍니다!
좋은하루 보내시구요-
감사합니다-
답변 2