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-block.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 に答える