一只萌萌小番薯
2019-03-01 20:55:19
圖中,最左邊(左上)的div,因?yàn)閳D片有點(diǎn)高,下面多出一截,導(dǎo)致 1 處圖片,錯(cuò)位了。把3,4的圖片擠壓到第三行去了。怎么能把1處放到2處。3,4處圖片自動(dòng),跟著2處排列。變成這樣的,不是瀑布流,就是一個(gè)wp文章列表顯示。
2 回答

阿波羅的戰(zhàn)車
TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超6個(gè)贊
我發(fā)現(xiàn)了一個(gè)高級(jí)方法,用偽類解決了。
好處是不需要設(shè)定固定寬高。
.col-md-4:nth-child(3n+1){
clear:left!important;
}
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
怎么堆積col都不會(huì)變形了。
添加回答
舉報(bào)
0/150
提交
取消