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

Question

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

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

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

Answer 1

@media查询

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

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

JSFiddle演示

上面的演示@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 */
}
...