0

鉴于以下

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

得到...

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

想要

  +------------------------------------+
  |                                    |
  |  +------------------------------+  |
  |  |                              |  |
  |  | +----+     +----+     +----+ |  |
  |  | |    |     |    |     |    | |  |
  |  | |    |     |    |     |    | |  |  
  |  | +----+     +----+     +----+ |  |
  |  |                              |  |
  |  | +----+     +----+     +----+ |  |
  |  | |    |     |    |     |    | |  |
  |  | |    |     |    |     |    | |  |  
  |  | +----+     +----+     +----+ |  |
  |  |                              |  |
  |  | +----+     +----+     +----+ |  |
  |  | |    |     |    |     |    | |  |
  |  | |    |     |    |     |    | |  |  
  |  | +----+     +----+     +----+ |  |
  |  |                              |  |    
  |  +------------------------------+  |
  |                                    |
  +------------------------------------+
4

3 回答 3

1

使用该表并创建 3 列，每列应包含 DIV。您可以通过使用轻松地将 DIV 对齐在中心

<td align="center">
于 2013-02-22T08:56:07.953 回答
0

添加padding: 3%;到.container

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

演示

或text-align:center_.container 

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

演示 2

也display:block改成display:inline-blockin.square

于 2013-02-22T08:56:55.887 回答
0

更改或添加这些：

.square{
    position: relative;
    width: 27%;
    padding-top: 3%;
    margin-left: 4%;
    margin-right: 1%;
    margin-top: 5%;
    margin-bottom: 0%;
}
.container{
    padding-bottom: 5%;
}
于 2013-02-22T09:11:25.483 回答