DIV+CSS常見佈局操作
阿新 • • 發佈：2018-11-02
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常見佈局操作</title> <style> .topheight{ clear: both; display: block; margin-top:350px;} h1{text-align: center;} .container1{max-width: 960px; margin: 0 auto;} .header1{height:20px;background: red;} .main1{height:50px;background: green;} .footer1{height:20px;background: blue;} /*3*/ .left3{width:200px; height: 300px;float: left; background: skyblue;} .main3{height: 300px; margin-left: 200px; background: blue;} /*4 */ .right4{width:200px; height: 300px;float: right; background: skyblue;} .main4{height: 300px; margin-right: 200px; background: blue;} /*5*/ .container5{width: 960px;margin: 0 auto;background: blue;} .clear5{-ms-zoom:1;} .clear5:after{content: '';clear: both; display: block;} .left5{width:200px; height: 300px; float: left;background: red;} .right5{width:750px; height: 300px; float: right; background: green;} /*6*/ .container6{position:absolute;max-width: 960px;margin:auto; left:0; right:0;background: blue;} .left6{position:absolute;top:0;left:0;width:200px; height: 300px; background: red;} .right6{position:absolute;top:0;right:0;width:750px; height: 300px; background: green;} /*7*/ .container7{max-width: 960px; margin: 0 auto; position: relative;z-index: 999;} .left7{float: left; width: 200px; height: 300px; background: red} .right7{float: right; width: 200px; height: 300px; background: blue} .main7{margin-left:200px; margin-right:200px; height: 300px; background: green;} /*8*/ .container8{max-width: 960px; position: absolute;left: 0;right:0; margin: 0 auto;} .left8{position: absolute;top:0;left:0;width: 200px; background: pink; height: 300px;} .right8{position: absolute;top:0;right:0;width: 200px; background: yellow; height: 300px;} .main8{margin-left: 200px;margin-right: 200px; background:blue; height: 300px;} </style> </head> <body> <h1>1、單列：上中下等寬</h1> <div class="container1"> <div class="header1">頭部</div> <div class="main1">主體</div> <div class="footer1">底部</div> </div> <h1>2、單列自適應佈局：只需改變案例1中的佈局即可不用改css</h1> <div class="header1"><div class="container1">頭部</div></div> <div class="main1"><div class="container1">主體</div></div> <div class="footer1"><div class="container1">底部</div></div> <h1>3、二列布局：左側固定，右側自適應</h1> <div class="left3">左側</div> <div class="main3">主體</div> <h1>4、二列布局：右側固定，左側自適應</h1> <div class="right4">右側</div> <div class="main4">主體</div> <h1>5、二列左右固定、自動撐開父類（偽類方式）</h1> <div class="container5 clear5"> <div class="left5"></div> <div class="right5"></div> </div> <h1>6、二列左右固定(絕對定位方式)</h1> <div class="container6"> <div class="left6">左</div> <div class="right6">右</div> </div> <h1 class="topheight">7、三列布局：float+margin</h1> <div class="container7"> <div class="left7"></div> <div class="right7"></div> <div class="main7"></div> </div> <h1>8、三列布局：絕對定位+margin</h1> <div class="container8"> <div class="left8"></div> <div class="right8"></div> <div class="main8"></div> </div> </body> </html>