固定大小盒子的 CSS 流体网格答案

【问题标题】：CSS Fluid Grid of Fixed Sized Boxes固定大小盒子的 CSS 流体网格
【发布时间】：2014-01-20 23:42:23
【问题描述】：

到目前为止，我有一个由相同大小的盒子组成的流体网格。在屏幕宽度为 800px 或更大时，屏幕中心有两排四个蓝色框，as shown here. 代码如下：

<style type="text/css">
body {width:100%; min-height:100%;}

#content {width:100%; max-width:800px; margin:0 auto;}

.box { float: left; display: table; height: 180px; 
      width: 180px; margin:10px; background-color:blue;}
</style>

<body>
   <div id="content">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>
</body>

随着屏幕宽度的减小，盒子的大小保持不变，每行的盒子数量减少，它们下降到更多的行。所有这些正是我想要的。唯一的问题是随着屏幕宽度的减小，框会左对齐。

我希望剩余的行居中。有人可以帮忙吗？

【问题讨论】：

标签： html css fluid-layout

【解决方案1】：

一种方法是：

将 .box 上的显示更改为 display: inline-block;而不是表格。
移除.box上的float:left
将 text-align:center 添加到 #content div。

示例 - http://jsfiddle.net/QxhUs/3/

CSS

#content {
    width:100%;
    max-width:800px;
    margin:0 auto;
    text-align:center;
}

.box {

    display: inline-block;
    height: 170px;
    width: 170px;
    margin:10px;
    background-color:blue;
}

【讨论】：

@PeterKrauss - 将overflow:auto; 添加到.box div - jsfiddle.net/QxhUs/167
谢谢！现在我们可以用你的 CSS 来表达一个通用的“响应式框集”布局。见jsfiddle.net/Kv4VH