Question

这是我关于stackoverflow的第一个问题，希望做对。

所以，问题是我想每行放置2个div https://i.imgur.com/dS7lEbo.png

但是当我添加Fourt时，第三和Fourt分别下降一行。

https://i.imgur.com/fxf8SiV.png

我曾尝试过使用magin-top，但只有在第二个div比另一个div多1％的情况下，它才有效（这不是我想要的）。

https://i.imgur.com/dS7lEbo.png

{% extends "base.html" %}
{% block content %}
    <div class="row-progetti-explorer">
        {% for p in all_p %}
            <div
                {% if forloop.counter|divisibleby:2 %}
                    class="div-progetti2"
                {% else %}
                    class="div-progetti1"
                {% endif %}
                >
                <h3>
                    <a href="{% url 'War:detail' p.pk %}"><b>{{ p.nome.title }}</b></a>
                </h3>
                <p style="border-bottom: 1px solid darkgreen">Category:
                    <a href="{% url 'War:explore' p.categoria_primaria.name %}">{{ p.categoria_primaria.name }}</a>
                    {% for c in p.categoria_secondaria.all %}
                         <a href="{% url 'War:explore' c.name %}">{{ c.name }}</a>
                    {% endfor %}
                </p>
                <a href="{% url 'War:detail' p.pk %}">
                    <div class="img">
                        <img src="{{ p.img.url }}">
                    </div>
                </a>
            </div>
        {% endfor %}
    </div>
{% endblock %}





.row-progetti-explorer {
    height: 100%;
    width: 100%;
    text-align: center;
    display:inline-block;
    background-color: blueviolet;
}

.div-progetti1{
    border: 2px solid darkgreen;
    float: left;
    width: 35%;
    background-color: red;
    color: black;
}

.div-progetti2{
    border: 2px solid darkgreen;
    float: right;
    width: 35%;
    background-color: palegoldenrod;
    color: black;
}

我说过我每行2格（第一个链接）

Answer 1

我相信您的div-progetti2类还有额外的利润。您可以使用浏览器的检查器进行检查。这是有关如何使用chrome inspector的教程：

https://www.templatemonster.com/help/use-google-chrome-web-inspector.html

Answer 2

我认为这可以为您提供帮助，但是您只需要根据您的语言重新装修或修改此代码即可。 这仅是前端，并且您可以代替<hr/>标记来修改边界底部 .header类

.row-progetti-explorer {
            width: 100%;
            max-width: 1140px;
            margin: auto;
        }

        .div-progetti2 {
            width: 50%;
            float: left;
        }

        .main-content {
            padding: 2%;
        }

        .header {
            text-align: center;
        }

        .img-responsive {
            width: 100%;
            height: auto;
        }

<div class="row-progetti-explorer">

            <div class="div-progetti2">
                <div class="main-content">
                    <div class="header">
                        <h3> Dummy Title </h3>
                        <p>category: dummy</p>
                    </div>
                    <hr/>
                    <a href="#">
                        <div class="img">
                            <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" alt="img">
                        </div>
                    </a>
                </div>
            </div>
            
            <div class="div-progetti2">
                <div class="main-content">
                    <div class="header">
                        <h3> Dummy Title </h3>
                        <p>category: dummy</p>
                    </div>
                    <hr/>
                    <a href="#">
                        <div class="img">
                            <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" alt="img">
                        </div>
                    </a>
                </div>
            </div>
            
            <div class="div-progetti2">
                <div class="main-content">
                    <div class="header">
                        <h3> Dummy Title </h3>
                        <p>category: dummy</p>
                    </div>
                    <hr/>
                    <a href="#">
                        <div class="img">
                            <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" alt="img">
                        </div>
                    </a>
                </div>
            </div>
            
            <div class="div-progetti2">
                <div class="main-content">
                    <div class="header">
                        <h3> Dummy Title </h3>
                        <p>category: dummy</p>
                    </div>
                    <hr/>
                    <a href="#">
                        <div class="img">
                            <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" alt="img">
                        </div>
                    </a>
                </div>
            </div>
            
    </div><!-- end .row-progetti-explorer -->

div标签翻译，我不知道为什么

2 个答案: