div+css布局

来源：互联网发布：手机淘宝怎么抢红包编辑：程序博客网时间：2024/05/21 06:01

两栏布局

利用margin

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <style>            .first{overflow: hidden;;margin-top: 50px;color:#fff;}            .first-left{width: 100px;height: 100px;float:left;background: red}            .first-right{margin-left: 100px;height: 100px;background: black;word-wrap: break-word;}        </style>    </head>    <body>    <div class="first">            <div class="first-left"></div>            <div class="first-right"></div>    </div>    </body></html>

模仿圣杯

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <style>            .second{padding-left: 100px;overflow: hidden;margin-top: 50px;color:#fff;}            .second-left{width: 100px;height: 100px;float:left;background: red;margin-left:-100%;position: relative;left:-100px;}            .second-right{float: left;background: black;height: 100px;width: 100%;word-wrap: break-word;}        </style>    </head>    <body>    <div class="second">            <div class="second-right"></div>            <div class="second-left"></div>    </div>    </body></html>

利用overflow：hidden

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <style>            .third{overflow: hidden;margin-top: 50px;color:#fff;}            .third-left{float:left;width: 100px;height: 100px;background: red}            .third-right{overflow: hidden;background: black;height: 100px;word-wrap: break-word;}        </style>    </head>    <body>    <div class="third">            <div class="third-left"></div>            <div class="third-right"></div>    </div>    </body></html>

三栏布局

圣杯布局

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <style>            .sixth{overflow: hidden;margin-top: 50px;color:#fff;padding: 0 100px}            .sixth-middle{float:left;background: yellow;width: 100%;height: 100px}            .sixth-left{float:left;background: red;width: 100px;height: 100px;margin-left: -100%;position: relative;left: -100px;}            .sixth-right{float:right;background: black;height: 100px;width: 100px;margin-left: -100px;position: relative;right:-100px;}        </style>    </head>    <body>    <div class="sixth">            <div class="sixth-middle"></div>            <div class="sixth-left"></div>            <div class="sixth-right"></div>    </div>    </body></html>

双飞翼布局

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <style>            .seventh{overflow: hidden;margin-top: 50px;color:#fff;}            .seventh-middle{width: 100%;height:100px;background: yellow;float: left}            .inner{margin-left: 100px;margin-right:100px}            .seventh-left{width: 100px;height: 100px;float: left;margin-left: -100%;background: red;}            .seventh-right{width: 100px;height: 100px;float: left;margin-left: -100px;background: black;word-wrap: break-word;}        </style>    </head>    <body>    <div class="seventh">            <div class="seventh-middle">                <div class="inner">                </div>            </div>            <div class="seventh-left">left</div>            <div class="seventh-right">right</div>    </div>    </body></html>

利用flex实现圣杯

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <style>            .eighth{display: flex;height: 100px}            .eighth-middle{background: black;flex: 1;color: #fff}            /*         flex:1 == 1 1 auto：剩余空间放大比例(flex-grow)  空间不足缩小比例(flex-shrink)    分配多余空间之前项目占据的主轴空间(flex-basis)        flex:1指的是：中部区域自由伸缩        auto指的是项目本来大小，因未给main设置高度,main高度由子元素最高者决定，若子元素高度为0，则main高度为0        块级元素未主动设置高度或未被子元素撑起高度，浏览器默认为块级元素分配高度为0。        */            .eighth-left{order:-1;flex: 0 0 50px;background: red;height: 100px}            .eighth-right{flex: 0 0 50px;background: yellow;height: 100px}        </style>    </head>    <body>    <div class="eighth">            <div class="eighth-middle">123</div>            <div class="eighth-left"></div>            <div class="eighth-right"></div>        </div>    </body></html>

一列定高，一列自适应

//一种是用box-sizing，然后marginghtml,body { height: 100%; padding: 0; margin: 0; }.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; }.A { height: 100px; margin: -100px 0 0; background: #BBE8F2; }.B { height: 100%; background: #D9C666; }<div class="outer">        <div class="A"></div>        <div class="B"></div></div>//第二种用boxsizing,然后positionhtml,body { height: 100%; padding: 0; margin: 0; }.outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; }.A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; }.B { height: 100%; background: #D9C666; }//relative+absolutebody { height: 100%; padding: 0; margin: 0; }.outer { height: 100%; position: relative; }.A { height: 100px; background: #BBE8F2; }.B { background: #D9C666; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0; }

0 0