我正在尝试将 <hr>
下面各三<div>
s(一个 <hr>
每三个 <div>
s),但是我得到了意想不到的结果。我得出的结论是我必须放一个 <hr>
低于三分之一 <div>
,但是当我这样做时,它的位置不正确(请参阅演示)。
我正在使用这个 Django 模板:
{% extends 'pages/base.html' %}
{% load static %}
{% block cssfiles %}
<link rel="stylesheet" href="{% static 'products/css/list.css' %}" />
{% endblock %}
{% block jsfiles %}
<script type="text/javascript" src="{% static 'products/js/ellipsis.js' %}" defer></script>
{% endblock %}
{% block content %}
{% for product in products %}
<div class='product'>
<div class='product-title'><a href="{{ product.get_absolute_url }}">{{ product.title }} ({{ product.year }})</a></div>
<hr class='product-separator'>
{% if product.image %}
<div class='product-image'>
<img src='{{ product.image.url }}' width='100' height='100'>
</div>
{% endif %}
<p class='product-price'>${{ product.price }}</p>
</div>
{% if forloop.counter|add:1|divisibleby:3 %}
<hr>
{% endif %}
{% endfor %}
{% endblock %}
这是 jsfiddle链接。
最佳答案
考虑使用 CSS Grid 和 Flexbox 进行更细粒度的控制。请参阅我在代码顶部添加的四个 CSS 规则:
.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.grid > hr{
grid-column: 1/4;
width: 100%;
}
.product {
display: flex;
flex-flow: column;
}
.product > .product-price{
margin-top: auto;
padding-top: 15px;
}
ul#menu {
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding :0;
}
li {
display: inline-block;
margin-right: 1px;
}
li a {
display:block;
min-width:103px;
height: 30px;
text-align: center;
line-height: 30px;
font-family: "Share Tech Mono";
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*.product {
float: left;
width: 215px;
max-width: 215px;
height: 215px;
max-height: 215px;
}*/
.product-title {
color: #62646a;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
font-weight: bold;
font-size: 13px;
line-height: 13px;
/*height: 26px;
overflow: hidden;*/
}
.product-description {
margin-left: 10px;
margin-right: 10px;
font-size: 12px;
text-align: justify;
text-justify: inter-word;
}
.product-separator {
height: 1px;
border-top: 1px;
border-left: 1px;
border-right: 1px;
margin-left: 10px;
margin-right: 10px;
color: #d9d7d7;
}
.product-image img {
display: block;
margin: auto;
margin-top: 20px;
}
.product-price {
color: #62646a;
margin-top: 15px;
margin-left: 10px;
font-size: 18px;
}
.product:hover {
background: #f5f3f2;
}
body {
margin: auto;
max-width: 800px;
}
<nav>
<ul id='menu'>
<li><a href="/">Home</a></li>
<li><a href="/shop">Shop</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<div class="grid">
<div class='product'>
<div class='product-title'><a href="/shop/1/">Franz Joseph (1917)</a></div>
<hr class='product-separator'>
<p class='product-price'>$100.00</p>
</div>
<div class='product'>
<div class='product-title'><a href="/shop/2/">Krugerrand South Africa (1917)</a></div>
<hr class='product-separator'>
<p class='product-price'>$200.00</p>
</div>
<div class='product'>
<div class='product-title'><a href="/shop/3/">Morgan Silver Dollar (1965)</a></div>
<hr class='product-separator'>
<div class='product-image'>
<img src='http://placekitten.com/200/200' width='100' height='100'>
</div>
<p class='product-price'>$50.00</p>
</div>
<hr>
<div class='product'>
<div class='product-title'><a href="/shop/4/">Peace Silver Dollar (1934)</a></div>
<hr class='product-separator'>
<div class='product-image'>
<img src='http://placekitten.com/200/200' width='100' height='100'>
</div>
<p class='product-price'>$75.00</p>
</div>
<div class='product'>
<div class='product-title'><a href="/shop/5/">Kralj Petar Drugi (1978)</a></div>
<hr class='product-separator'>
<div class='product-image'>
<img src='http://placekitten.com/200/200' width='100' height='100'>
</div>
<p class='product-price'>$1.00</p>
</div>
<div class='product'>
<div class='product-title'><a href="/shop/6/">Kralj Stefan Prvi Prvovencani Kotromanic (1389)</a></div>
<hr class='product-separator'>
<p class='product-price'>$1000.00</p>
</div>
</div>
关于html - <hr> 每三个 <div> 下面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57926988/