html - 每三个 下面

Question

我正在尝试将 <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链接。

Answer 1

考虑使用 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>