div中的汽车中心div。

问题描述：

<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之间均匀分布。

越来越...

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

想

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

贵外容器有一个固定的或最大宽度？在您提供的示例中，调整页面大小将使这些框全部出现在同一行上。 – 2013-02-22 08:55:40

不，这是移动的，因此屏幕尺寸会根据你的好奇心而改变风景/ portait – maxum 2013-02-22 08:56:51

，你见过[foundation]（http://foundation.zurb.com/）吗？ – axel 2013-02-22 08:57:38

答

对齐中心DIV添加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

答

使用表，并创建3列，每列应该有DIV中。您可以轻松地通过使用

<td align="center">

答

改变或添加这些：

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

相关推荐