[ css ] 想拿来吹牛的普二三栏布局

[ouuz]

第 5 天 小张同学终于会用选择器来设置样式啦，在经过前天的水平垂直居中尝试后，她跃跃欲试，想开始自己的布局（折磨）之路。今天她在网上冲浪的时候，听见隔壁老王在跟532里最好看的女孩子吹牛，说自己在一个页面上实现了三种布局：1:普通布局（头部、内容、底部依次往下）2.两栏布局（左边固定大小，右边自适应） 3. 三栏布局（左右大小固定，中间自适应）。小张羡慕极了，她也想学会了跟帅哥吹牛，请你帮帮她实现这个小小的愿望吧！

[deximy]

普通布局

        <div id="container">
            <div id="header"></div>
            <div id="body"></div>
            <div id="footer"></div>
        </div>
        <style>
            #header
            {
                background-color: #ff0000;
            }
            #body
            {
                background-color: #66ccff;
            }
            #footer
            {
                background-color: #0080ff;
            }
            #container
            {
                display:grid;
                grid-template-rows: 100px auto 100px;
                grid-template-columns: 100%;
            }
            html, body, #container
            {
                height: 100%;
                margin: 0px;
            }
        </style>

两栏布局

        <div id="container">
            <div id="left"></div>
            <div id="body"></div>
        </div>
        <style>
            #left
            {
                background-color: #ff0000;
            }
            #body
            {
                background-color: #66ccff;
            }
            #container
            {
                display:grid;
                grid-template-rows: 100%;
                grid-template-columns: 100px auto;
            }
            html, body, #container
            {
                height: 100%;
                margin: 0px;
            }
        </style>

三栏布局

        <div id="container">
            <div id="left"></div>
            <div id="body"></div>
            <div id="right"></div>
        </div>
        <style>
            #left
            {
                background-color: #ff0000;
            }
            #body
            {
                background-color: #66ccff;
            }
            #right
            {
                background-color: #0080ff;
            }
            #container
            {
                display:grid;
                grid-template-rows: 100%;
                grid-template-columns: 100px auto 100px;
            }
            html, body, #container
            {
                height: 100%;
                margin: 0px;
            }
        </style>

皮一把真开心（逃