DIV+CSS布局

最新推荐文章于 2022-01-08 22:22:31 发布

great-sage

最新推荐文章于 2022-01-08 22:22:31 发布

阅读量918

点赞数

分类专栏： js/jQuery/html/css JavaEE/Java C#/.net 文章标签： css CSS Css div DIV html Html HTML

本文链接：https://blog.csdn.net/thinkscape/article/details/8505077

版权

JavaEE/Java 同时被 3 个专栏收录

48 篇文章 0 订阅

订阅专栏

C#/.net

48 篇文章 0 订阅

订阅专栏

js/jQuery/html/css

41 篇文章 0 订阅

订阅专栏

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>