鍍金池/ 問(wèn)答/HTML5  網(wǎng)絡(luò)安全  HTML/ 對(duì)于如下情景該如何去布局？

對(duì)于如下情景該如何去布局？

問(wèn)題描述

clipboard.png

對(duì)于這樣布局的頁(yè)面，有的格子會(huì)超出div的寬度，但是接下來(lái)的div的同一行卻不會(huì)被頂?shù)胶竺嫒?，如何才能讓后面的同一行的格子被頂?shù)胶竺娑皇潜桓采w掉。

對(duì)前端并不是很熟練，試了試float之類(lèi)的都無(wú)果，想知道有什么解決辦法嗎？

回答
編輯回答
蟲(chóng)児飛

float，flex布局兩種方式都可以。 其實(shí)還有g(shù)rid布局也能實(shí)現(xiàn)，只不過(guò)你說(shuō)對(duì)css不是特別熟悉，grid目前的兼容性也還不是特別好，這里就不說(shuō)了。
假設(shè)html結(jié)構(gòu)為

<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方式，只需設(shè)置

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

  2. 若采用flex布局方式

     .grid-container {
     display: flex; 
     flex-wrap: wrap;
 }
 .grid-item {
    width: xxxx;  //此處需指定寬度
 }
2018年5月6日 13:06