小编tal*_*ock的帖子

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

到目前为止,我有一个相同大小的盒子的流体网格.屏幕宽度为800px或更大时,屏幕上有两排四个蓝色框,如图所示.代码如下:

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

Run Code Online (Sandbox Code Playgroud)

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

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

html css fluid-layout

tal*_*ock

lucky-day

2
推荐指数

1
解决办法

6877
查看次数