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

Question

问题描述

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

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

Answer 1

float，flex布局两种方式都可以。 其实还有grid布局也能实现，只不过你说对css不是特别熟悉，grid目前的兼容性也还不是特别好，这里就不说了。
假设html结构为

<div class="grid-container">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
</div>

1. 若用float方式，只需设置

   .grid-container {
       overflow: hidden;
   }
   .grid-item {
      float: left;
   }

2. 若采用flex布局方式

    .grid-container {
        display: flex; 
        flex-wrap: wrap;
    }
    .grid-item {
       width: xxxx;  //此处需指定宽度
    }