正确对齐Css框

Question

我的框不能正确对齐。其中有些是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> 

Answer 1

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

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