html - 正确对齐CSS方块

我有无法正确对齐的框。其中一些比其他像素高40像素，并且具有删除图标，如图所示：
Not working

如果所有盒子的高度相同，则盒子将正确对齐：
working

不幸的是，我无法使它们都具有相同的高度。我想在不改变高度的情况下正确对齐它们。我知道由于高度不同，会有一些边距差异，但这没关系。
这是盒子的代码：

.parents-parent {
    margin: auto;
    width: 800px;
}
.parent {
    float: left;
    width: 200px;
    background-color: white;
    border: 1px solid rgb(230,230,230);
    margin: 10px;
    min-height: 150px;
  }
  .exam-box-el {
    background-color: white;
    height: 40px;
    line-height: 40px;
    width: 100%;
  }
  .exam-box-el:hover {
    background-color: rgb(247,247,247);
    cursor: pointer;
  }
  .parent a {
    color: rgb(85, 85, 85);
  }
  .parent a:hover {
    text-decoration: none;
    color: rgb(85, 85, 85);
  }
  .parent .glyphicon {
    margin: 0 5px 0 10px;
  }
  .more {
    border-top: 1px solid rgb(210,210,210);
  }
  .exam-title {
    text-align: center;
    background-color: ;
    height: 40px;
    line-height: 40px;
    width: 100%;
  }
  .exam-title a {
    color: rgb(51, 122, 183);
  }
  .exam-title a:hover {
    text-decoration: none;
    color: rgb(51, 122, 183);
  }

和html：

<div class="parents-parent">
{% for exam in exams %}

<div class="parent" exam-id="{{ exam.pk }}" csrf="{{ csrf_token }}">

<div class="exam-title">
<a><b>Test številka {{ exam.exam_number }}</b></a>
</div>

<a class="exam-span-wrapper">
<div class="exam-box-el  exam-span-file">
<span class="glyphicon glyphicon-file"></span> Test
</div>

<ul class="exam-ul">
{% for file in exam.examfile_set.all %}
<li class="exam-li-img" src="{{ file.exam_file.url }}" alt="Slika Testa" width="60" height="60" class="img-resposive exam-img">Slika Testa {{ forloop.counter }}</li>
{% endfor %}
</ul>

</a>

<a class="comment">
<div class="exam-box-el">
<span class="glyphicon glyphicon-comment"></span> Komentarji
</div>
</a>

<a class="mark-exam">
  <div class="exam-box-el">
      <span data-toggle="tooltip" data-placement="bottom" title="Potrebno popravka" class="glyphicon glyphicon-ban-circle {% if user in exam.exam_mark.all %}active{% endif %}"></span> Potrebno popravka
  </div>
</a>

<a href="{% url 'profile' exam.exam_user %}">
<div class="exam-box-el"><span class="glyphicon glyphicon-user"></span>{{ exam.exam_user }}
</div>
</a>

{% if exam.exam_user == user %}

<a href="#" class="remove-exam">
<div class="exam-box-el more">
<span class="glyphicon glyphicon-remove glyphicon-remove-exam"  data-toggle="tooltip" data-placement="bottom" title="Izbriši"></span>
 Odstrani
</div>
</a>
{% endif %}

</div>


{% endfor %}

</div>

最佳答案

添加.parents-parent { display: flex; flex-wrap: wrap; }并从float删除.parent。这将创建伸缩行，并且每个项目将拉伸以匹配父级的高度。

或者，如果您总是要每行有3个单元格，则可以在浮动单元格上使用:nth-child()清除每个第3个元素上的左侧浮动元素。您可以通过添加.parent:nth-child(3n + 1) { clear: left; }

关于html - 正确对齐CSS方块，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44219081/