Question

我正在尝试在每三个<hr>下放置一个<div>（每三个<hr>放置一个<div>），但是却得到了意外的结果。我得出的结论是，我必须在每三个<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>

Answer 2

这是浮点数，它破坏了所有内容，因为您告诉浏览器将产品彼此相邻显示。

尝试一下：

</div>
{% if forloop.counter|add:1|divisibleby:3 %}
<hr style="clear:both;">

每三个<div>以下的<hr>

2 个答案: