Question

当屏幕宽度增加/减少时，是否有人知道在不断变化的列数中显示输入的好方法？比方说，我有15个人。如果您的屏幕宽度为1200像素，我想为您提供3列中的15人，每人5人。如果你的屏幕宽度在800到1200像素之间，那么我想给你2列7和8，以及任何小于800像素的列，我只会给你一个15人的列表。

我正在寻找jQuery或angularJS解决方案。

Answer 1

我不会使用angularjs或javascript来执行此操作，因为收听resize-event非常昂贵。为什么不使用css-media查询？

@media(min-width: 1200px){
   td:nth-child(13+n){
     display: none;
   } 
   tr:nth-child(4+n){
     display: none;
   } 
}
@media(min-width: 800ox){
   td:nth-child(8+n){
     display: none;
   } 
   tr:nth-child(3+n){
     display: none;
   } 
}

如果你真的想，你可以使用这样的东西： http://jsfiddle.net/GpLHZ/

虽然链接到处理数据的特定控制器或表的指令的指令可能是更好的方法。

Answer 2

可以将CSS3 columns属性与媒体查询结合使用来更改它们

随着宽度的增加自动增加列数

2 个答案: