[1][2][3][4]
我有四个向左浮动的 DIV（上图），使用简单的 CSS：float:left;宽度：128 像素；高度：128 像素
当我缩小屏幕时，最后一个 DIV 正确跳到下一行：
[ 1 ] [ 2 ] [ 3 ]
[ 4 ]
但我真正想要的是最后两个块跳到下一行，以保持外观对称：
[ 1 ] [ 2 ]
[ 3 ] [ 4 ]
当屏幕进一步缩小时，块会一层一层地堆叠：
[ 1 ]
[ 2 ]
[ 3 ]
[ 4 ]
这是使用媒体查询执行此操作的一种方法。
技巧是选择一个合适的断点max-width，例如 610px，然后使用nth-child选择从第三个子元素开始清除每个第三个子元素的浮动。
参考： https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
