Question

我想为网页创建网格布局。它应该包含九个单元格，它们恰好适合当前浏览器窗口视口。中心单元应具有固定的宽度和高度，并且水平和垂直居中。动态调整所有其他单元格以适合实际的浏览器窗口大小。

我更喜欢仅CSS解决方案，可能是一个开源CSS网格框架。不过，jQuery也很好。

Answer 1

好的，自己弄明白：http://jsfiddle.net/alp82/TR6EY/

HTML：

<div id="container">
    <div id="top">
        <div id="top-left">
            <h1>TOP LEFT</h1>
        </div>
        <div id="top-center">
            <h1>TOP CENTER</h1>
        </div>
        <div id="top-right">
            <h1>TOP RIGHT</h1>
        </div>
    </div>
    <div id="middle">
        <div id="mid-left">
            <h1>MID LEFT</h1>
        </div>
        <div id="center">
            <h1>CENTER</h1>
        </div>
        <div id="mid-right">
            <h1>MID RIGHT</h1>
        </div>
    </div>
    <div id="bottom">
        <div id="bot-left">
            <h1>BOTTOM LEFT</h1>
        </div>
        <div id="bot-center">
            <h1>BOTTOM CENTER</h1>
        </div>
        <div id="bot-right">
            <h1>BOTTOM RIGHT</h1>
        </div>
    </div>
</div>

CSS：

html, body {
    margin: 0px;
}

#container {
    display: table;
    width: 100%;
}

#container > div {
    display: table-row;
}

#container > div > div {
    display: table-cell;
    vertical-align: middle;
}

#center {
    width: 300px;
    height: 200px;
}

h1 {
    text-align: center;
}

JS：

$(document).ready(function() {
    calculateHeights();

    $(window).bind('load resize orientationchange', function() {
        calculateHeights();
    });

    function calculateHeights() {
        $('#top, #top > div, #bottom, #bottom > div').css({
            'height' : (($(window).height() - $('#center').height()) / 2) + 'px',
            'min-height' : (($(window).height() - $('#center').height()) / 2) + 'px'
        });
    }
});

带有网格图块的网页流体设计

1 个答案: