对于如下情景该如何去布局？

Question

对于这样布局的页面，有的格子会超出div的宽度，但是接下来的div的同一行却不会被顶到后面去，如何才能让后面的同一行的格子被顶到后面而不是被覆盖掉。

对前端并不是很熟练，试了试float之类的都无果，想知道有什么解决办法吗？

Answer 1

float，flex布局两种方式都可以。 其实还有grid布局也能实现，只不过你说对css不是特别熟悉，grid目前的兼容性也还不是特别好，这里就不说了。假设html结构为<div&nbsp;class="grid-container"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="grid-item"></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="grid-item"></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="grid-item"></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="grid-item"></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="grid-item"></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="grid-item"></div></div>若用float方式，只需设置.grid-container&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden; }.grid-item&nbsp;{&nbsp;&nbsp;&nbsp;float:&nbsp;left; }若采用flex布局方式&nbsp;.grid-container&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;flex-wrap:&nbsp;wrap; &nbsp;}&nbsp;.grid-item&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;xxxx;&nbsp;&nbsp;//此处需指定宽度 &nbsp;}