對于這樣布局的頁面，有的格子會超出div的寬度，但是接下來的div的同一行卻不會被頂到后面去，如何才能讓后面的同一行的格子被頂到后面而不是被覆蓋掉。對前端并不是很熟練，試了試float之類的都無果，想知道有什么解決辦法嗎？
1 回答
汪汪一只貓
TA貢獻1898條經驗 獲得超8個贊
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>
若用float方式，只需設置
.grid-container { overflow: hidden; }.grid-item { float: left; }若采用flex布局方式
.grid-container { display: flex; flex-wrap: wrap; } .grid-item { width: xxxx; //此處需指定寬度 }
- 1 回答
- 0 關注
- 612 瀏覽
添加回答
舉報
0/150
提交
取消