正确地将两个盒子对齐

Question

我在三个宽的屏幕（PC）上有三排三排的盒子。我想让它们在小屏幕（手机）上每行对齐两行，占用屏幕的全部宽度（包括边距，填充...）。我怎么能做到这一点？还有一些比其他人高出40px。现在，我有这个CSS更宽的屏幕：

.parents-parent { 
    margin: auto; 
    width: 700px; 
} 
.parent { 
    float: left; 
    width: 200px; 
    background-color: white; 
    border: 1px solid rgb(230,230,230); 
    margin: 10px; 
    } 
    .parent:nth-child(3n + 1) { 
    clear: left; 
} 

和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 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"></span> 
     Odstrani 
    </div> 
    </a> 
    {% endif %} 

</div> 


{% endfor %} 

</div> 

Answer 1

您可以使用@media查询您的布局现在将开始断裂，并指定宽度将占据50 ％行，并清除每个:nth-child(odd)元素。

.parent { 
 
    float: left; 
 
    width: 200px; 
 
    background-color: white; 
 
    border: 1px solid rgb(230, 230, 230); 
 
    margin: 10px; 
 
} 
 

 
.parent:nth-child(3n + 1) { 
 
    clear: left; 
 
} 
 

 
@media (max-width: 682px) { 
 
    .parent:nth-child(3n + 1) { 
 
    clear: none; 
 
    } 
 
    .parent:nth-child(odd) { 
 
    clear: left; 
 
    } 
 
    .parent { 
 
    width: calc(50% - 22px); 
 
    } 
 
}

<div class="parent">foo</div> 
 
<div class="parent">foo</div> 
 
<div class="parent">foo</div> 
 
<div class="parent">foo</div> 
 
<div class="parent">foo</div> 
 
<div class="parent">foo</div> 
 
<div class="parent">foo</div> 
 
<div class="parent">foo</div> 
 
<div class="parent">foo</div>