这种前端需求如何解决？

Question

1.在数据量比较小的时候，出现3条数据竖排

2.在数据量比较大的时候出现。出现两条数据横排

要求不能出现滚动条。

Answer 1

写两套样式吧。。。

Answer 2

框架有这种栅格布局 找你适合的

但是这么简单 直接俩套css

判断数据多少 来显示哪套

Answer 3

第一种：浮动布局

用一个class标志当前数据量是否大于3

>3 float 并且 width 50%

否则width 100%

第二种：flexbox布局

同样用一个class标志是否大于3
小于3的时候flex-wrap: wrap并且子元素width 100%

大于3的时候width50%即可

Answer 4

前几天刚好做过这个需求，不过我的数据只有3条和4条之分，3条一行显示，4条时两行显示

codepen