在 HTML 网页中分屏

Question

需要构建一个拆分的网页。如何将屏幕分成 5 个不同的区域：

North, 
South, 
East, 
West and Center .

如何在 HTML PAGE 中完成？

Answer 1

像这样：

HTML（体内）

<div id="North">
    North Area
</div>
<div id="Wrapper">
    <div id="West">
        West Area
    </div>
    <div id="Center">
        Center Area
    </div>
    <div id="East">
        East Area
    </div>
</div>
<div id="South">
    South Area
</div>

CSS

#North,#Wrapper,#South
{
    width: 100%;
}

#Center,#East,#West
{
    display: inline-table;
    width: 32%;
    vertical-align: top;
}

body
{
    text-align: center;
}

北面、南面和 Wrapper 以及全角对象，其中北面在顶部，南面在其余内容的下方。然后，west、east 和 center 分别设置为各自区域内屏幕宽度的 33%，因此它们彼此相邻。

示例：JSFiddle

在 HTML 网页中分屏

Splitting a screen in HTML webpage

html

webpage