[1][2][3][4]
我有四个向左浮动的 DIV（上图），使用简单的 CSS：float:left;宽度：128 像素；高度：128 像素
当我缩小屏幕时，最后一个 DIV 会正确跳到下一行：
[1][2][3]
[4]
但我真正想要的是最后两个块跳到下一行以保持外观对称：
[1][2]
[3][4]
当屏幕进一步缩小时，积木会一个接一个地堆叠：
[1]
[2]
[3]
[4]
【问题讨论】：
标签： css responsive
很好，但为了提高响应性并满足最后一个要求，您可以使用它：
.box {
float: left;
width: 128px;
height: 128px;
background-color: grey;
margin: 10px;
box-sizing: border-box;
border: 2px solid black;
width: calc(25% - 20px);
}
.container-box {
border: 1px dotted blue;
overflow: auto;
box-sizing: borderbox;
}
@media (max-width: 610px) {
.box {
background-color: yellow;
width: calc(50% - 20px);
}
.box:nth-child(2n+3) {
background-color: red;
clear: left;
}
}
@media (max-width: 400px) {
.box {
background-color: yellow;
width: calc(100% - 20px);
}
.box:nth-child(2n+3) {
background-color: yellow;
clear: initial;
}
}<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>【讨论】：
这是使用媒体查询的一种方法。
诀窍是为max-width 选择一个合适的断点，例如610px，然后使用选中的nth-child 清除从第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>【讨论】：
尝试将 2 个 div 包装到一个容器 div 中，然后将该容器 div 的宽度设置为每个常规 div 大小的两倍。
<div class="container-box">
<div class="box">1</div>
<div class="box">2</div>
</div>
<div class="container-box">
<div class="box">3</div>
<div class="box">4</div>
</div>
.box {
float:left;
width:128px;
height:128px;
background: grey;
}
.container-box {
float: left;
width: 256px;
height: 128px;
}
这是一个小提琴的链接：https://jsfiddle.net/wfhk1fak/1/
希望这会有所帮助。
【讨论】：
将 [3] 和 [4] 组合在一个 div 中（如果需要，还可以将 [1] 和 [2] 组合在一起）。给它一个最大宽度，但自动高度。这样，当屏幕变窄时，两个 div 应该并排一起移动，但当屏幕变窄时会向下跳。
例如：
.contain {
max-width:256px;
height:auto;
}
<div class="contain">
<div class="div3">contents</div>
<div class="div4">contents</div>
</contain>
【讨论】：