다른 템플릿에서 상속할 때 CSS 그리드가 다르게 동작합니다.
14408 단어 ask
base.html(내가 상속하는 템플릿)
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.banner-image {
border-radius: 50%;
position: absolute;
bottom: 20px;
left: 0px;
}
.banner-container {
position: relative;
padding-bottom: 175px;
background-color: red;
width: 100%;
}
.main-banner-text {
position: absolute;
width: 100%;
text-align: center;
top: 15px;
}
.login-text {
position: absolute;
bottom: 5px;
right: 10px;
line-height: 5px;
}
.login-btn {
top: 0px;
}
.nav-button {
position: absolute;
top: 0px;
left: 0px;
}
.cart-button {
position: absolute;
top: 0px;
right: 0px;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500&display=swap">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/jquery.mCustomScrollbar.min.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/media-queries.css">
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
{% load static %}
<title>{% block title %}Base Page{% endblock %}</title>
</head>
<body>
<div class="banner-container">
<div class="nav-button">
<div class="w3-sidebar w3-bar-block w3-border-right" style="display:none" id="mySidebar">
<button onclick="w3_close()" class="w3-bar-item w3-large">Close x</button>
<a href="/" class="w3-bar-item w3-button">Home</a>
<a href="/accounts"class="w3-bar-item w3-button">Accounts</a>
</div>
<button class="w3-button w3-xxxlarge" onclick="w3_open()">☰</button>
</div>
<div class="main-banner-text">
<h1>Jumpin' Jacks Luxery Auto Shop</h1>
</div>
<img src="{% static 'store/base/base-pic.jpg' %}" alt="Image Not Found" style="width: 12%; height: 50%; position: absolute; bottom: 15px; left: 50px; border-radius: 50%;">
<div class="login-text">
{% if user.is_authenticated %}
<a href="/logout"><button type="button" class="btn btn-warning">Logout</button></a>
{% else %}
<a href="/login"><button type="button" class="btn btn-dark">Login</button></a>
<a href="/register"><button type="button" class="btn btn-dark">Register</button></a>
{% endif %}
</div>
</div>
{% block content %}
{% endblock %}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<!-- Javascript -->
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/jquery-migrate-3.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/jquery.waypoints.min.js"></script>
<script src="assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="assets/js/scripts.js"></script>
<script>
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
</body>
</html>
base.html
CSS 그리드는 다음과 같이 템플릿 상속 없이 완벽하게 잘 작동합니다(모든 상자는 크기가 같고 화면의 전체 너비를 차지함).
home.html
home.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.homepage-container {
padding-bottom: 100%;
background-color: black;
border: 5px solid blue;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, auto);
border: 5px solid green;
color: white;
justify-items: center;
text-align: center;
}
.header {
border-style: solid;
border-color: white;
grid-column: span 3;
}
.second-header {
grid-column: span 3;
border-style: solid;
border-color: white;
}
.col-1 {
border-style: solid;
border-color: white;
}
.col-2 {
border-style: solid;
border-color: white;
}
.col-3 {
border-style: solid;
border-color: white;
}
</style>
{% load static %}
{% block title %}Welcome{% endblock %}
</head>
<body>
{% block content %}
<div class="homepage-container">
<div class="grid-container">
<div class="header">
<h1>Best Sellers</h1>
</div>
<div class="col-1">
<a href="/view/{{best_seller.name}}"><img src="{% static 'store/view/'%}{{best_seller.picture}}" alt="what the fuck" style="height: 75%; width: 100%;"></a>
{{best_seller.name}}
</div>
<div class="col-2">
<a href="/view/{{second_seller.name}}"><img src="{% static 'store/view/' %}{{second_seller.picture}}" alt="what the fuck" style="height: 75%; width: 100%;"></a>
{{second_seller.name}}
</div>
<div class="col-3">
<a href="/view/{{third_seller.name}}"><img src="{% static 'store/view/'%}{{best_seller.picture}}" alt="what the fuck" style="height: 75%; width: 100%;"></a>
{{third_seller.name}}
</div>
<div class="second-header">
<h1>More Stock ! </h1>
</div>
</div>
</div>
{% endblock %}
</body>
</html>
그러나 'base.html'에서 상속하면 그리드 상자가 표시된 대로 크기가 변경되기 시작합니다(코드 한 줄만 추가됨).
home.html
home.html
`
<style>
.homepage-container {
padding-bottom: 100%;
background-color: black;
border: 5px solid blue;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, auto);
border: 5px solid green;
color: white;
justify-items: center;
text-align: center;
}
.header {
border-style: solid;
border-color: white;
grid-column: span 3;
}
.second-header {
grid-column: span 3;
border-style: solid;
border-color: white;
}
.col-1 {
border-style: solid;
border-color: white;
}
.col-2 {
border-style: solid;
border-color: white;
}
.col-3 {
border-style: solid;
border-color: white;
}
</style>
{% extends 'base.html' %}
{% load static %}
{% block title %}Welcome{% endblock %}
</head>
<body>
{% block content %}
<div class="homepage-container">
<div class="grid-container">
<div class="header">
<h1>Best Sellers</h1>
</div>
<div class="col-1">
<a href="/view/{{best_seller.name}}"><img src="{% static 'store/view/'%}{{best_seller.picture}}" alt="what the fuck" style="height: 75%; width: 100%;"></a>
{{best_seller.name}}
</div>
<div class="col-2">
<a href="/view/{{second_seller.name}}"><img src="{% static 'store/view/' %}{{second_seller.picture}}" alt="what the fuck" style="height: 75%; width: 100%;"></a>
{{second_seller.name}}
</div>
<div class="col-3">
<a href="/view/{{third_seller.name}}"><img src="{% static 'store/view/'%}{{best_seller.picture}}" alt="what the fuck" style="height: 75%; width: 100%;"></a>
{{third_seller.name}}
</div>
<div class="second-header">
<h1>More Stock ! </h1>
</div>
</div>
</div>
{% endblock %}
</body>
`
참고 사항 저는 Django 프레임워크를 사용하고 있습니다.
왜 이런 일이 발생하는지 아는 사람이 있으면 알려주세요!
Reference
이 문제에 관하여(다른 템플릿에서 상속할 때 CSS 그리드가 다르게 동작합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jciafardo/css-grid-behaving-differently-when-inheriting-from-another-template-1lf3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
