一、本文实现的效果图如下:布局右侧使用flex布局,超过3个则换行。 父元素代码如下: .nav-right{ width: 75%; padding: 10px; display: flex; /* 默认是水平的 */ flex-direction: row;/*设置子元素的排列方向*/ flex-wrap: wrap;/*溢出则换行*/ } 子元素代码如下: .nav-right-item{ width: 33.33%; height: 120px; text-align: center; } 但是结果并不如人愿,行与行之间存在空白间隙 解决