3x3 CSSグリッド：センターdivを固定高さ/幅の唯一のものにする方法は？

Question

私はしばらくの間、中央のdivが固定幅&の高さを持ち、残りは必要に応じてウィンドウサイズに合わせて成長する3x3のグリッドレイアウトを作成しようとしていましたが、中心以外のdivを得ることはできません行動する。私は2列のレイアウトで動作するいくつかのソリューションを見つけましたが、3つのレイアウトに合わせる方法を理解できませんでした。ここに私がこれまで持っているものがあります：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の3xの高さ/幅であるラッパーdivの最小の高さ/幅を設定しています。

はまた、CSS3、プロジェクトのオプションであれば、The CSS 3 Flexible Box Modelに