3x3 CSS網格：如何讓中心div是唯一具有固定高度/寬度的網格？

Question

我一直在努力嘗試做一個3x3的網格佈局，其中中心div的高度固定爲&，其餘的長度根據需要增長到適合窗口大小，但我永遠無法獲得非中心div表現。我發現了一些適用於兩列布局的解決方案，但我無法弄清楚如何將它們適應三種。這是我到目前爲止：http://jsfiddle.net/WGaVH/

新來CSS在這裏，所以任何幫助非常感謝。謝謝！

Answer 1

顯示錶，使這個簡單的：

<style type="text/css"> 
    html, body { 
     padding: 0; 
     margin: 0; 
    } 
    .grid3x3 { 
     display:table; 
     height:100%; 
     width:100%; 
    } 
    .grid3x3 > div { 
     display:table-row; 
     width:100%; 
    } 
    .grid3x3 > div:nth-child(2) { 
     height: 100px; 
    } 
    .grid3x3 > div > div { 
     display:table-cell; 
    } 
    .grid3x3 > div > div:nth-child(2) { 
     width:100px; 
    } 

    div { 
     outline: 1px solid orange; 
    } 


</style> 
<div class="grid3x3"> 
    <div> 
     <div>1</div> 
     <div>2</div> 
     <div>3</div> 
    </div> 
    <div> 
     <div>4</div> 
     <div>5</div> 
     <div>6</div> 
    </div> 
    <div> 
     <div>7</div> 
     <div>8</div> 
     <div>9</div> 
    </div> 
</div> 

Answer 2

這裏就是我的工作了：http://jsfiddle.net/WGaVH/21/

我簡化了HTML一些。有一些div的重疊，這可能會產生一些挑戰，取決於你打算如何處理背景（儘管沒有任何可能與另一個嵌套div無法解決的問題）。

HTML

<div id="wrapper"> 

    <div class="top left"><p><span id="topLeftContent">1</span></p></div> 
    <div class="top mid"><p><span id="topCenterContent">2</span></p></div> 
    <div class="top right"><p><span id="topRightContent">3</span></p></div> 

    <div class="main left"><p><span id="mainLeftContent">4</span></p></div> 
    <div class="main mid"><p><span id="mainCenterContent"> 
     <object width="84" height="60" align="middle"></object>5 
    </span></p></div> 
    <div class="main right"><p><span id="mainRightContent">6</span></p></div> 


    <div class="bottom left"><p><span id="bottomLeftContent">7</span></p></div> 
    <div class="bottom mid"><p><span id="bottomCenterContent">8</span></p></div> 
    <div class="bottom right"><p><span id="bottomRightContent">9</span></p></div> 

</div> 

CSS（顏色僅用於演示）

html, body{width:100%;height:100%;} 
    html,body {margin:0;padding:0} 

    #wrapper{width:100%;height:100%;background:#bbffbb;overflow:hidden;} 

    .top, .main, .bottom { 
     text-align:center; 
     float: left; 
     position: relative; 
     background-color: #FFFFCC; 
    } 

    .top { 
     height: 50%; 
     margin-bottom: -30px; 
    } 
    .top p { 
     margin-bottom: 30px; 
    } 
    .main { 
     height: 60px; 
     z-index: 2; 
    } 
    .bottom { 
     height: 50%; 
     margin-top: -30px; 
    } 
    .bottom p { 
     margin-top: 30px; 
    } 
    .left { 
     width: 50%; 
     margin-right: -42px;   
    } 
    .left p { 
     margin-right: 42px; 
    } 
    .mid { 
     width: 84px; 
     z-index: 2; 
    } 
    .right { 
     width: 50%; 
     margin-left: -42px; 
    } 
    .right p { 
     margin-left: 42px; 
    } 
    .main.mid { 
     z-index: 3; 
     background-color: #CCFFFF; 
    } 
    .mid { 
     background-color: #FFFFFF; 
    } 
    .main { 
     background-color: #FFCCFF; 
    } 

Answer 3

看看http://jsfiddle.net/WgF7Z/1/。

頁面上的所有div使用除中心div以外的百分比寬度。也許它可以爲你啓動一些想法。

在這個例子中避免重疊的技巧是在包裝div上設置一個最小高度/寬度，它是固定中心div的高度/寬度的3倍。

而且，如果CSS3是爲您的項目的選項，看看The CSS 3 Flexible Box Model