FWIW：现在是2017年，网格布局模块可以立即使用（prependemo）。如果浏览器支持适合您，请使用grid。如果没有，请继续阅读…。
正如@ Skadi2k3的答案中所提到的，使用CSS最好的方法是进行一系列媒体查询。
话虽如此，如果您使用的是诸如LESS之类的预处理器-这并不是一件困难或容易出错的任务。（尽管，是的，CSS仍然很长很丑）
@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 ></li> <li ></li> ... <li ></li></ul>
剩下的CSS（少）：
#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 mixin中使用的变量-得到的确切布局。
假设我有300px X 100px的项目，最少2列，最多6列，边距为15px-我只是像这样修改变量：
@item-width:300px;@item-height:100px;@margin: 15px;@min-cols:2;@max-cols:6;
