2

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

<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>

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

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

4

1 回答 1

7

一种方法是：

  • 将 .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;
}
于 2013-06-11T09:05:46.417 回答