(编辑:jimmy 日期: 2024/10/30 浏览:2)
使用flex布局,如果是九宫格的话正好可以平分,如图
如果是我们只需要八块,如图
但是我们想让最后一块左对齐,依次排列,需要在元素的父级增加伪元素after,如图
<div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
ul{ display: flex; flex-wrap: wrap; justify-content: space-between; } ul:after{ content: ""; width: 32%; } ul li{ width: 32%; height: 10vh; margin-bottom: 1vh; background: #2fbaff; }