DIV+CSS布局

来源：互联网发布：手机mac地址重复编辑：程序博客网时间：2024/06/05 13:35

HTML:

<body>            <div id="layout">                <div id="north">                    north部分                </div>                <div id="middle">                    <span>包含div:</span><br/>                    <br/>float: left; /*关键点5,同被包含在里面的div一样设置浮动,否则错位*/                    <br/>                    <br/>                    <!-- 关键点6,html语言中,定宽的div标记在放在自适应div前面 -->                    <div id="westOrEast">                        <span>定宽div:</span><br/>                        <br/>float: left(right);  /*关键点1,固定宽度div在左(右)就设置float到左(右)*/                        <br/>关键点6,html语言中,定宽的div标记在放在自适应div前面                    </div>                    <div id="center">                        <span>自适应div:</span><br/>                        <br/>float: none;  /*关键点3,自适应宽度div不设置float */                        <br/>width: auto;  /*关键点4,自适应宽度div不设置width */                        <br/>margin-left(margin-right): 定宽div宽度;  /*关键点2,自适应宽度div跟随在固定宽度div后面,如果定宽div在左(右)就设置左(右)边距为定宽div的宽度 */                     </div>                </div>                <div id="south">                    <span>south部分</span><br/>                    <br/>clear: both; /*关键点7,清除前面div的浮动*/                </div>            </div>    </body>

CSS:

<style type="text/css">            html { font-family:"Verdana,宋体"; font-size:12px; margin:0;padding: 0;                min-width: 700px;                _width: expression(document.documentElement.clientWidth<700?"700px":"100%");                min-height: 600px;                _height: expression(document.documentElement.clientHeigh<600?"600px":"100%");                overflow: auto;                                /*width: 100%;height: 100%; 不设置这两个,是为了防止出现双滚动条*/                /*_width: expression(this.scrollWidth<700?"700px":"auto"); IE6下有BUG*/                /*_height: expression(this.scrollHeight<700?"700px":"auto"); IE6下有BUG*/            }            body { font-family:"Verdana,宋体"; font-size:12px; margin:0;padding: 0;                min-width: 699.7px;  /*值比html的略小*/                _width: expression(document.documentElement.clientWidth<699.7?"699.7px":"98%");                min-height: 599.7px; /*值比html的略小*/                _height: expression(document.documentElement.clientHeigh<599.7?"599.7px":"98%");                                /*width: 99.7%;height: 99.7%; /*值比html的略小,不设置这两个,是为了防止出现双滚动条*/                /*_width: expression(this.scrollWidth<700?"700px":"auto"); IE6下有BUG*/                /*_height: expression(this.scrollHeight<699.7?"699.7px":"auto"); IE6下有BUG*/            }            #layout {margin:0;                width: 99.5%;                height: auto;                border: solid 1px red;            }            #north {height:60px; background:#fff; margin-bottom:5px;border: solid 1px #000;}            #middle {                float: left; /*关键点5,同包含在里面的div一样设置浮动,否则错位*/                width: 100%;                height:auto;                margin-bottom:5px;                border: solid 1px green;            }            #westOrEast {                float: left;  /*关键点1,固定宽度div在左(右)就设置float到左(右)*/                width: 250px;                min-height: 300px;                _height: expression(this.scrollHeight<300?"300px":"100%");                background:#d3d3d3;border: solid 1px #000;                /*如果同时要设置一个最大高度,就用下面两句*/                /*max-height: 600px;*/                /*_height: expression(this.scrollHeight<300?"300px":this.scrollHeight>600?"600px":"auto");*/                             }            #center {                float: none;  /*关键点3,自适应宽度div不设置float */                width: auto;  /*关键点4,自适应宽度div不设置width */                margin-left: 260px;  /*关键点2,自适应宽度div跟随在固定宽度div后面,如果定宽div在左(右)就设置左(右)边距为定宽div的宽度 */                min-height: 400px;                _height:  expression(this.scrollHeight<400?"400px":"100%");                border: solid 1px #da70d6;            }            #south {clear: both; /*关键点7,清除前面div的浮动*/            height:60px; background:#fffafa;border: solid 1px #ccc; }        </style>