css – 将固定宽度的div装入流体容器中

我有简单的结构与容器和内盒：

<div id="container">
    <div class="block"></div>
    // more blocks
    <div class="block"></div>
</div>

我想要实现的是将盒子放在这个容器内,但要尽可能地将它们装在一行中.我可以使用JS：http://jsfiddle.net/JhxSd/做同样的事情,但我想避免这种情况,并且只使用CSS.那可能吗？

解决方法

@media查询

使用一组@media查询根据当前屏幕大小为网格定义不同的布局.布局中唯一需要改变的部分是网格包装器的宽度.

出于所有实际目的,这是目前唯一可用的CSS解决方案.有关@media查询为何合适的原因以及其他可用CSS选项无效的原因,请参阅this answer.

JSFiddle Demo

上面的演示有@media查询,屏幕大小最大可达1200px(可根据需要添加更多),并且不使用JavaScript. #container的渲染宽度始终为75％(不计算边框),网格在#container中居中.

注意：此解决方案需要在块周围添加包装div.在每个@media查询中,包装器的宽度足以适合适合当前屏幕大小的列数.固定的包装宽度允许网格作为一个整体在#container中居中.如果编辑静态HTML不是一个选项,则可以在使用jQuery加载页面时添加包装器div.

HTML

<div id="container">
    <div class="grid-wrapper">
        <div class="block"></div>
        ...
    </div>
</div>

CSS

#container {
    width: 75%;
    ...
}
.grid-wrapper {
    margin: 0 auto;
    width: 70px;   /* Default: 1 column */
}
@media (min-width: 200px) {
    .grid-wrapper {width: 140px;}   /* 2 columns */
}
@media (min-width: 290px) {
    .grid-wrapper {width: 210px;}   /* 3 columns */
}
...