FWIW：现在是 2017 年，grid layout module 开箱即用 (codepen demo)。如果browser support 适合您 - 然后使用网格。如果没有，请继续阅读......
正如@Skadi2k3 的回答中提到的，你可以用 CSS 做的最好的事情是使用一系列媒体查询。
话虽如此，如果您使用的是 LESS 等预处理器 - 这并不是一项困难或容易出错的任务。 （虽然，是的，CSS 仍然会很长而且很丑）
以下是利用 LESS 设置媒体查询的方法：
像这样设置一个迭代混合：（您可以将此代码粘贴到http://less2css.org）
@item-width:100px;
@item-height:100px;
@margin: 5px;
@min-cols:2;
@max-cols:12; //set an upper limit of how may columns you want to write the media queries for
.loopingClass (@index-width) when (@index-width <= @item-width * @max-cols) {
@media (min-width:@index-width) {
#content{
width: @index-width;
}
}
.loopingClass(@index-width + @item-width);
}
.loopingClass (@item-width * @min-cols);
上面的mixin会以表格形式吐出一系列媒体查询：
@media (min-width: 200px) {
#content {
width: 200px;
}
}
@media (min-width: 300px) {
#content {
width: 300px;
}
}
@media (min-width: 400px) {
#content {
width: 400px;
}
}
...
@media (min-width: 1200px) {
#content {
width: 1200px;
}
}
所以用一个简单的标记，比如：
<ul id="content">
<li class="box"></li>
<li class="box"></li>
...
<li class="box"></li>
</ul>
剩余的 CSS (LESS)：
#content {
margin:0 auto;
overflow: auto;
min-width: @min-cols * @item-width;
max-width: @max-cols * @item-width;
display: block;
list-style:none;
background: aqua;
}
.box {
float: left;
height: @item-height - 2 *@margin;
width: @item-width - 2*@margin;
margin:@margin;
background-color:blue;
}
... 你会得到想要的结果。
...自定义布局非常容易：
我需要做的就是根据我的需要更改我在 LESS 混合中使用的变量 - 我得到了我想要的确切布局。
假设我有 300px X 100px 的项目，最少 2 列，最多 6 列，边距为 15px - 我只是像这样修改变量：
@item-width:300px;
@item-height:100px;
@margin: 15px;
@min-cols:2;
@max-cols:6;