Richten Sie die CSS-Boxen richtig aus

Question

Ich habe Boxen, die nicht richtig ausgerichtet werden. Einige von ihnen sind 40px höher als andere, und haben Symbol entfernen, wie Sie im Bild sehen kann: Not working

Wenn alle Boxen die gleiche Höhe sind dann Boxen ausrichten richtig wäre: working

Leider kann ich nicht machen sie alle gleich groß. Ich möchte sie richtig ausrichten, ohne die Höhe zu ändern. Ich weiß, dass es wegen der unterschiedlichen Höhe einige Margenunterschiede geben wird, aber das ist in Ordnung. Hier ist der Code für die Boxen:

.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); 
    } 

und 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; } hinzufügen und die float von .parent entfernen. Dadurch werden Flex-Zeilen erstellt und jedes Element wird so gestreckt, dass es der Höhe des übergeordneten Elements entspricht.

Oder wenn Sie immer 3 Zellen pro Zeile haben, können Sie :nth-child() auf den Floating-Zellen verwenden, um die linken Floats auf jedem dritten Element zu löschen. Sie würden das tun, indem Sie .parent:nth-child(3n + 1) { clear: left; }