Question

到目前为止，我有一个大小相等的流体网格。屏幕宽度为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>

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

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

Answer 1

一种方法是：

更改.box上的显示以显示：inline-block;而不是表。
删除浮动：左侧.box
将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;
}

固定尺寸箱体的CSS流体网格

1 个答案: