Question

我一直在努力制作一个3x3网格布局，其中中心div有一个固定的宽度＆amp;高度，其余部分根据需要增长以适应窗口大小，但我永远不能让非中心div表现出来。我找到了一些适用于双列布局的解决方案，但我无法弄清楚如何将它们调整为三个。这是我到目前为止所拥有的：http://jsfiddle.net/WGaVH/

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

Answer 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;
   }

Answer 2

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

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

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

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

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

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

3 个答案: