Question

鉴于以下内容

  <style>
  .container {
  overflow: hidden;
  height: 100%;
  width: 90%;
  margin: 15px auto 0px auto;
  }
  .square
  {
  float: left;
  width: 80px;
  height: 80px;
  display: block;
  background-image: url('commonimgs/empty_icon.png');
  background-repeat: no-repeat;
  margin: 2px;
  padding-top: 3%;
  margin-left: 5px;      
  }
  </style>
  <div>
  <div class="container">
      <div class="square">1R</div>
      <div class="square">2R</div>
      <div class="square">3R</div>
      <div class="square">4R</div>
      <div class="square">5R</div>
      <div class="square">6</div>
      <div class="square">7</div>
      <div class="square">8</div>
      <div class="square">9</div>
      <div class="square">10</div>      
  </div>
  </div>

我正在尝试制作一个自动居中并适应屏幕尺寸的平铺布局。我无法弄清楚如何让squares在container均匀分布。

...得到

  +------------------------------------+
  |                                    |
  |  +------------------------------+  |
  |  |                              |  |
  |  | +----+ +----+ +----+         |  |
  |  | |    | |    | |    |         |  |
  |  | |    | |    | |    |         |  |  
  |  | +----+ +----+ +----+         |  |
  |  |                              |  |
  |  | +----+ +----+ +----+         |  |
  |  | |    | |    | |    |         |  |
  |  | |    | |    | |    |         |  |  
  |  | +----+ +----+ +----+         |  |
  |  |                              |  |
  |  | +----+ +----+ +----+         |  |
  |  | |    | |    | |    |         |  |
  |  | |    | |    | |    |         |  |  
  |  | +----+ +----+ +----+         |  |
  |  |                              |  |    
  |  +------------------------------+  |
  |                                    |
  +------------------------------------+

想

  +------------------------------------+
  |                                    |
  |  +------------------------------+  |
  |  |                              |  |
  |  | +----+     +----+     +----+ |  |
  |  | |    |     |    |     |    | |  |
  |  | |    |     |    |     |    | |  |  
  |  | +----+     +----+     +----+ |  |
  |  |                              |  |
  |  | +----+     +----+     +----+ |  |
  |  | |    |     |    |     |    | |  |
  |  | |    |     |    |     |    | |  |  
  |  | +----+     +----+     +----+ |  |
  |  |                              |  |
  |  | +----+     +----+     +----+ |  |
  |  | |    |     |    |     |    | |  |
  |  | |    |     |    |     |    | |  |  
  |  | +----+     +----+     +----+ |  |
  |  |                              |  |    
  |  +------------------------------+  |
  |                                    |
  +------------------------------------+

Answer 1

使用该表并创建3列，每列应该包含DIV。您可以使用

轻松地将DIV对齐

<td align="center">

Answer 2

将padding: 3%;添加到.container

.container {
  overflow: hidden; 
  height: 100%;
  width: 90%;
  margin: 15px auto 0px auto;
    background:#dbdbdb;
      padding: 3%;
  }

<强> DEMO

或text-align:center至.container

.container {
  overflow: hidden; 
  height: 100%;
  width: 90%;
  margin: 15px auto 0px auto;
  background:#dbdbdb;
  padding: 3%; text-align:center
}

DEMO 2

同时在display:block

中将display:inline-block更改为.square

Answer 3

更改或添加以下内容：

.square{
    position: relative;
    width: 27%;
    padding-top: 3%;
    margin-left: 4%;
    margin-right: 1%;
    margin-top: 5%;
    margin-bottom: 0%;
}
.container{
    padding-bottom: 5%;
}

div中的自动中心div。

3 个答案: