如何在靈活的佈局中創建等間距的div網格？

Question

我試圖創造一個佈局是這樣的：

我的問題是圍繞着五盒專門爲中心。我與CSS鬥爭讓它工作。你們有這樣一個佈局的簡單設置嗎？

Answer 1

我看到你有固定的寬度，所以這裏是一個例子。寬度對於你的寬度不是精確的，但你可以esily設置你需要的值。這裏主要的東西是在small_bottom類中的float:left，它使div顯示在一行中。底層類中的overflow:hidden使div可以環繞浮動div（沒有它將顯示爲像內部沒有任何東西）。如果你想這取決於瀏覽器窗口寬度 - 嘗試使用small_bottom的寬度百分比。

HTML：

<div class="main"> 
    <div class="top"></div> 
    <div class="bottom"> 
     <div class="small_bottom"></div> 
     <div class="small_bottom"></div> 
     <div class="small_bottom"></div> 
     <div class="small_bottom"></div> 
     <div class="small_bottom"></div> 
    </div> 
</div>​ 

CSS：

div{border:solid 1px;} 
.main{width:350px; border:solid 1px;} 
.top{ height:40px;margin:5px;} 
.small_bottom{ 
    float:left; 
    height:50px; 
    width:50px; 
    margin:5px; 
} 
.bottom{margin:5px; overflow:hidden;} 

​ 

Here是一個例子它的外觀