html - 固定列宽，列数/行数取决于屏幕宽度

Question

使用 Bootstrap 3，我正在寻找一种网格布局，其中列宽在任何屏幕分辨率下都是固定的(比如 200 像素)，但它们的数量取决于屏幕宽度。

换句话说，我知道列的宽度，但我不知道每行有多少列，因为这取决于屏幕宽度。单元格之间的边距也将取决于屏幕宽度。

当屏幕宽度较大时，肯定是列多行少:

 ______________________________________________________________
|   ___________    ___________    ___________    ___________   |
|  |           |  |           |  |           |  |           |  |
|  |    #1     |  |    #2     |  |    #3     |  |    #4     |  |
|  |<- 200px ->|  |<- 200px ->|  |<- 200px ->|  |<- 200px ->|  |
|  |           |  |           |  |           |  |           |  |
|  |___________|  |___________|  |___________|  |___________|  |
|   ___________                                                |
|  |           |                                               |
|  |    #5     |                                               |
|  |<- 200px ->|                                               |
|  |           |                                               |
|  |___________|                                               |
|______________________________________________________________|

当屏幕宽度较小时，肯定是列少行多。

               ________________________________
              |   ___________    ___________   |
              |  |           |  |           |  |
              |  |    #1     |  |    #2     |  |
              |  |<- 200px ->|  |<- 200px ->|  |
              |  |           |  |           |  |
              |  |___________|  |___________|  |
              |   ___________    ___________   |
              |  |           |  |           |  |
              |  |    #3     |  |    #4     |  |
              |  |<- 200px ->|  |<- 200px ->|  |
              |  |           |  |           |  |
              |  |___________|  |___________|  |
              |   ___________                  |
              |  |           |                 |
              |  |    #5     |                 |
              |  |<- 200px ->|                 |
              |  |           |                 |
              |  |___________|                 |
              |________________________________|

解决方案是什么？

我尝试了 Bootstrap grid system ，但您仍然必须指定每行的列数(否则我不知道如何使用它)。

Answer 1

网格系统用于创建响应式部分并将它们放在彼此的上方或侧面，但您正在寻找的不是响应式的，您的元素是固定的。我认为你可以用简单的风格轻松地做到这一点。例如，将所有元素放在一个全宽的列中，然后设置它们的样式。

div{
    width:100px;
    height:100px;
    background:#aaa;
    margin:15px;
    float:left;
}

这里是 DEMO .