鍍金池/ 問(wèn)答/HTML/ 這種前端需求如何解決？

這種前端需求如何解決？

1.在數(shù)據(jù)量比較小的時(shí)候，出現(xiàn)3條數(shù)據(jù)豎排

clipboard.png

2.在數(shù)據(jù)量比較大的時(shí)候出現(xiàn)。出現(xiàn)兩條數(shù)據(jù)橫排

clipboard.png

要求不能出現(xiàn)滾動(dòng)條。

回答
編輯回答
夏夕

寫(xiě)兩套樣式吧。。。

2018年1月1日 16:26
編輯回答
爆扎

前幾天剛好做過(guò)這個(gè)需求，不過(guò)我的數(shù)據(jù)只有3條和4條之分，3條一行顯示，4條時(shí)兩行顯示

codepen

2017年5月23日 17:04
編輯回答
帥到炸

框架有這種柵格布局 找你適合的

但是這么簡(jiǎn)單 直接倆套css

判斷數(shù)據(jù)多少 來(lái)顯示哪套

2017年7月16日 10:19
編輯回答
柒喵

第一種：浮動(dòng)布局

用一個(gè)class標(biāo)志當(dāng)前數(shù)據(jù)量是否大于3

>3 float 并且 width 50%

否則width 100%

第二種：flexbox布局

同樣用一個(gè)class標(biāo)志是否大于3
小于3的時(shí)候flex-wrap: wrap并且子元素width 100%

大于3的時(shí)候width50%即可

2018年8月29日 00:07