两栏布局,三栏布局,等高布局,流式布局
读前笑一笑:
我前面一女生平胸,然后我问她哪天你晚上自己回家,被劫色怎么办…?
她淡淡的回了句:“我就脱了上衣,然后说,别激动,是自己人”……自己人……己人…人…
两栏布局:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> 左定宽,右自动 </title> <style type="text/css"> html,body{margin:0; padding: 0;} .m-box .left,.m-box .right { height: 200px; line-height:200px; text-align:center; } .m-box .left{float:left; width:200px; background-color:#ccc; } .m-box .right{margin-left:210px; background-color:#666;} </style> </head> <body> <div class="m-box"> <div class="left">左</div> <div class="right">右</div> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> 左定宽,右自动 </title> <style type="text/css"> html,body{margin:0; padding: 0;} .m-box .left,.m-box .right { height: 200px; line-height:200px; text-align:center; } .m-box .left{position: absolute; width:200px; background-color:#ccc; } .m-box .right{margin-left:210px; background-color:#666;} </style> </head> <body> <div class="m-box"> <div class="left">左</div> <div class="right">右</div> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> 左定宽,右自动 </title> <style type="text/css"> html,body{margin:0; padding: 0;} .m-box .cont,.m-asider { height: 200px; line-height:200px; text-align:center; } .m-box { float:left; width: 100%;} .m-box .cont {margin-left:210px;background-color: #ccc;} .m-asider {float: left; width: 200px; margin-left: -100%; background-color: #ccc;} </style> </head> <body> <div class="m-box"> <div class="cont">右</div> </div> <div class="m-asider">左</div> </body> </html>
三栏布局:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> 左右固定,中间自适应 </title> <style type="text/css"> html,body{margin:0; padding: 0;} .left,.right,.center { height: 200px; line-height:200px; text-align:center; } .left {float:left; width: 200px; background-color: #ccc;} .right {float:right; width: 200px; background-color: #ccc;} .center { margin: 0 210px; background-color: #666;} </style> </head> <body> <div class="left">左</div> <div class="right">右</div> <div class="center">中</div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> 左右固定,中间自适应 </title> <style type="text/css"> html,body{margin:0; padding: 0;} .left,.right,.center { height: 200px; line-height:200px; text-align:center; } .left {position:absolute; top:0; left:0; width: 200px; background-color: #ccc;} .right {position:absolute; top:0; right:0; width: 200px; background-color: #ccc;} .center { margin: 0 210px; background-color: #666;} </style> </head> <body> <div class="left">左</div> <div class="right">右</div> <div class="center">中</div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> 三列布局 </title> <style type="text/css"> html,body{margin:0; padding: 0;} .left,.right,.m-box .center { height: 200px; line-height:200px; text-align:center; } .m-box { float:left; width: 100%;} .m-box .center {margin:0 210px;background-color: #666;} .left,.right {float: left; width: 200px; margin-left: -100%; background-color: #ccc;} .right {margin-left: -200px;} </style> </head> <body> <div class="m-box"> <div class="center">中</div> </div> <div class="left">左</div> <div class="right">右</div> </body> </html>
4.float+position+margin(两侧自动,中间定宽)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> 三列布局 </title> <style type="text/css"> html,body{margin:0; padding: 0;} .m-box{ height: 200px; line-height:200px; text-align:center; background-color: #ccc;} .warp1{float:left; width:50%;_margin-right:-3px;} .warp2{margin-left:50%; text-align:right; _margin-left:0; _zoom:1;} .m-box1{ margin-right:100px;} .m-box2{margin-left:100px;} .m-box3{ background:red;width:200px; position:absolute; left:50%; margin-left:-100px; top:0; z-index:2;} </style> </head> <body> <div class="warp1"> <div class="m-box m-box1">左</div> </div> <div class="warp2"> <div class="m-box m-box2">右</div> </div> <div class="m-box m-box3">中</div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>三栏布局</title> <style type="text/css"> html,body{margin:0; padding: 0;} .main,.m-center { height: 200px; line-height:200px; text-align:center; } .m-center { z-index: 2; background-color: #666; width: 500px; margin-left: -250px; position: absolute; top: 0; left: 50%; } .left, .right { z-index: 1; position: absolute; top: 0; width: 50%; } .left { left: 0; } .left .main { margin-right: 250px; background-color: #ccc; } .right { right: 0; } .right .main { margin-left: 250px; background-color: #ccc; } </style> </head> <body> <div class="m-center">中</div> <div class="left"> <div class="main">左</div> </div> <div class="right"> <div class="main">右</div> </div> </body> </html>
等高布局:
1.float+margin+position(两列等高布局)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>两列等高布局</title> <style type="text/css"> html,body{margin:0; padding: 0;} .clearfix { zoom: 1 } .clearfix:after { content: ""; display: block; height: 0; line-height: 0; font-size: 0; visibility: hidden; clear: both; } .wrap { width: 950px; margin: 0 auto; background: #ccc; } .content { margin-left: 150px; border-left: 1px solid #666; background: #ddd; } .main { float: left; width: 100%; } .side { float: left; width: 150px; margin-left: -950px; position: relative; } </style> </head> <body> <div class="wrap"> <div class="content clearfix"> <div class="main"> 中-等高吗?<br /> 中-等高吗?<br /> 中-等高吗?<br /> 中-等高吗?<br /> 中-等高吗?<br /> </div> <div class="side"> 左-等高吗?<br /> </div> </div> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三列自适应高布局</title> <style type="text/css"> html,body{margin:0; padding: 0;} .fl { float: left; } .container3 { background:green; overflow: hidden; position: relative; } .container2 { background:yellow; position: relative; right: 30%; } .container1 { width: 100%; background:red; position: relative; right: 40%; } .col1 { width: 26%; position: relative; left: 72%; overflow: hidden; } .col2 { width: 36%; position: relative; left: 76%; overflow: hidden; } .col3 { width: 26%; position: relative; left: 80%; overflow: hidden; } </style> </head> <body> <div class="container3 fl"> <div class="container2 fl"> <div class="container1 fl"> <div class="col1 fl">左<br/>小时候我有一个梦想,长大了我就忘了...</div> <div class="col2 fl">中<br/>小时候我有一个梦想,长大了我就忘了...小时候我有一个梦想,长大了我就忘了...</div> <div class="col3 fl">右<br/>小时候我有一个梦想,长大了我就忘了...小时候我有一个梦想,长大了我就忘了...小时候我有一个梦想,长大了我就忘了...</div> </div> </div> </div> </body> </html>
流式布局
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>流式布局</title> <style type="text/css"> html,body,p{margin:0; padding: 0;} .box { width: 340px; border: 1px #c2c2c2 solid; margin: 0 auto; overflow: hidden; } .box .list { float: left; width: 100px; margin: 10px 0 0 10px; } p { background-color: gray; margin-bottom: 10px; } .p1 { height: 100px; } .p2 { height: 125px; } .p3 { height: 150px; } .p4 { height: 200px; } </style> </head> <body> <div class="box"> <div class="list"> <p class="p4">4</p> <p class="p1">1</p> <p class="p3">3</p> <p class="p2">2</p> <p class="p4">4</p> <p class="p1">1</p> <p class="p3">3</p> <p class="p2">2</p> </div> <div class="list"> <p class="p2">2</p> <p class="p4">4</p> <p class="p3">3</p> <p class="p1">1</p> <p class="p2">2</p> <p class="p4">4</p> <p class="p3">3</p> <p class="p1">1</p> </div> <div class="list"> <p class="p4">4</p> <p class="p1">1</p> <p class="p2">2</p> <p class="p3">3</p> <p class="p4">4</p> <p class="p1">1</p> <p class="p2">2</p> <p class="p3">3</p> </div> </div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>流式布局</title> <style type="text/css"> html,body,p { margin: 0; padding: 0; } #box { position: relative; width: 360px; height: 400px; background-color: #f2f2f2; overflow: auto; margin: 0 auto; } p { position: absolute; top: 0; left: 0; width: 100px; background-color: gray; } .p1 { height: 100px; } .p2 { height: 125px; } .p3 { height: 150px; } .p4 { height: 200px; } </style> </head> <body> <div id="box"> <p class="p3">3</p> <p class="p2">2</p> <p class="p1">1</p> <p class="p2">2</p> <p class="p3">3</p> <p class="p4">4</p> <p class="p3">3</p> <p class="p2">2</p> <p class="p1">1</p> <p class="p2">2</p> <p class="p3">3</p> <p class="p4">4</p> </div> <script type="text/javascript"> var oBox = document.getElementById("box"); var aList = oBox.getElementsByTagName("p"); for(var i = 0, len = aList.length; i < len; i += 1) { var iCol = 3,iNum = i%iCol,iMargin = 10; aList[i].style.left = (iNum+1)*iMargin+parseInt(aList[0].offsetWidth*iNum, 10)+"px"; if(i >= iCol){ aList[i].style.top = aList[i-iCol].offsetHeight+aList[i-iCol].offsetTop+iMargin+"px"; } } </script> </body> </html>