每行放置两个div [英] place two divs per row

问题描述

所以我有X个div，我想将2个div放在彼此相邻的一行中.如果屏幕尺寸宽度小于n px，则每行应为1 div.

so I have X divs and I want to put 2 divs in one row next to each other. If the screen size width is below n px there should be 1 div per row.

目前我有这个

#container {
  display: flex;
}

.box {
  width: 50px;
  background: red;
}

@media(max-width: 300px) {
  #container {
    display: block;
  }
}

<div id="container">
  <div class="box"> 1 </div>
  <div class="box"> 2</div>
  <div class="box"> 3 </div>
  <div class="box"> 4 </div>
</div>

如何将伸缩框限制为每行两个div?

How can I limit the flex box to two divs per row?

推荐答案

在.box上添加50％的宽度，然后在容器上进行flex-wrap:wrap

Add 50% width on .box and flex-wrap:wrap on the container

此外，您不需要通过更改显示来进行操作:从flex到block.只需将.box元素的宽度更改为100％

Additionally, what you did by changing display: flex to block was not required. Just change the .box elements width to 100%

#container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 50%;
  background: red;
}

@media(max-width: 300px) {
  .box {
     width: 100%;
   }
}

<div id="container">
  <div class="box"> 1 </div>
  <div class="box"> 2</div>
  <div class="box"> 3 </div>
  <div class="box"> 4 </div>
</div>

这篇关于每行放置两个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！