这是我关于stackoverflow的第一个问题,希望能做对。
所以,问题是我想把2个div放在每行https://i.imgur.com/dS7lEbo.png上
但是当我把四个数加起来的时候,第三个数和四个数各往下一行。
https://i.imgur.com/fxf8SiV.png
我试过玩magin-top,但只有当第二个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个div (第一个链接)
发布于 2019-06-03 05:57:58
我相信你的div-progetti2类还有额外的余量。您可以使用浏览器的Inspector进行检查。这是一个关于如何使用chrome inspector的教程:
https://www.templatemonster.com/help/use-google-chrome-web-inspector.html
https://stackoverflow.com/questions/56419116
复制相似问题