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>

正确对齐两个方框

1 个答案: