关于布局：3×3 CSS网格：如何使center div成为唯一具有固定高度/宽度的div？


3x3 CSS grid: how to make center div the only one with a fixed height/width?

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

这里是CSS的新功能，因此非常感谢您的帮助。 谢谢！

这是我的工作成果：http://jsfiddle.net/WGaVH/21/

我简化了一些HTML。 div有一些重叠，具体取决于您打算对背景进行哪些操作(虽然不是其他嵌套div无法解决的任何问题)，但这可能会带来一些挑战。

的HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
    <p>
<span id="topLeftContent">1</span>
</p>
    <p><center>[wp_ad_camp_2]</center></p><p>
<span id="topCenterContent">2</span>
</p>
    <p>
<span id="topRightContent">3</span>
</p>

    <p>
<span id="mainLeftContent">4</span>
</p>
    <p>
<span id="mainCenterContent">
        <object width="84" height="60" align="middle"></object>5
    </span>
</p>
    <p>
<span id="mainRightContent">6</span>
</p>


    <p><center>[wp_ad_camp_3]</center></p><p>
<span id="bottomLeftContent">7</span>
</p>
    <p>
<span id="bottomCenterContent">8</span>
</p>
    <p>
<span id="bottomRightContent">9</span>
</p>

CSS(仅用于演示的颜色)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
    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;
   }

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

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

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

另外，如果您的项目选择使用CSS3，请查看CSS 3 Flexible Box Model

相关讨论

显示表使此操作变得容易：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<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>

   
        1
        2
        3
   
   
        4
        5
        6
   
   
        7
        8
        9