3x3 CSS 网格：如何使中心 div 成为唯一具有固定高度/宽度的网格？答案

【问题标题】：3x3 CSS grid: how to make center div the only one with a fixed height/width?3x3 CSS 网格：如何使中心 div 成为唯一具有固定高度/宽度的网格？
【发布时间】：2012-03-13 10:28:43
【问题描述】：

我一直在努力制作一个 3x3 网格布局，其中中心 div 具有固定的宽度和高度，其余部分根据需要增长以适应窗口大小，但我永远无法获得非中心div 的行为。我找到了一些适用于两列布局的解决方案，但我不知道如何将它们调整为三列。这是我目前所拥有的：http://jsfiddle.net/WGaVH/

这里是 CSS 新手，非常感谢任何帮助。谢谢！

【问题讨论】：

标签： css layout html grid center

【解决方案1】：

这是我的结果：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;
   }

【讨论】：

【解决方案2】：

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

页面上的所有 div 都使用百分比宽度，但中心 div 除外。也许它可以为您启动一些想法。

在此示例中避免重叠的技巧是在包装 div 上设置一个最小高度/宽度，该高度/宽度是固定中心 div 的高度/宽度的 3 倍。

此外，如果您的项目可以选择 CSS3，请查看 The CSS 3 Flexible Box Model

【讨论】：

百分比大小不是所要求的。
是的，在我的回复中，我明确指出中心 div 没有使用百分比。

【解决方案3】：

显示表格让这一切变得简单：

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

【讨论】：