css - 4 个 float DIV，可在带有 CSS 的缩小屏幕上对称响应

Question

[1][2][3][4]

我有四个 DIV 向左浮动(上方)，使用简单的 CSS:float:left;宽度:128px；高度:128px

当我缩小屏幕时，最后一个 DIV 正确地跳到下一行:

[1][2][3]

[4]

但我真正想要的是将最后两个 block 跳到下一行以保持外观对称:

[1][2]

[3][4]

当屏幕进一步变窄时，方 block 会一个一个地堆叠起来:

[1]

[2]

[3]

[4]

Answer 1

这是一种使用媒体查询的方法。

诀窍是为 max-width 选择一个合适的断点，例如 610px，然后使用选择的 nth-child 每次清除 float 从第 3 个元素开始的第 3 个子元素。

引用: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries

.box {
  float: left;
  width: 128px;
  height: 128px;
  background-color: grey;
  margin: 10px;
  box-sizing: border-box;
  border: 2px solid black;
}
.container-box {
  border: 1px dotted blue;
  overflow: auto;
  box-sizing: borderbox;
}
@media (max-width: 610px) {
  .box {
    background-color: yellow;
  }
  .box:nth-child(2n+3) {
    background-color: red;
    clear: left;
  }
}

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