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を削除 は、ここでのボックスのコードです。これによりフレックス行が作成され、各項目は親の高さに合わせてストレッチされます。

また、1行に3つのセルがある場合は、浮動小数点セルに:nth-child()を使用して、3番目の要素ごとに左浮動小数点数をクリアすることができます。 .parent:nth-child(3n + 1) { clear: left; }