1、圣杯布局
<!DOCTYPE html> <html> <head> <title>圣杯布局</title> <meta charset="utf-8"> <style type="text/css"> /*圣杯布局*/ .container{ /*为左右盒子留出位置*/ padding: 0 300px 0 200px; } .left,.middle,.right{ min-height: 130px; float: left; position: relative; } .left{ background: green; width: 200px; /*负边距让左右盒子移到和中间盒子同行,-100%表示左移一行的大小*/ margin-left: -100%; /*负值实现反方向移动,即向左移动填充padding-left*/ left: -200px; } .middle{ background-color: blue; /*单独占满一行*/ width: 100%; height: 1600px; } .right{ background-color: red; width: 300px; /*负边距让左右盒子移到和中间盒子同行*/ margin-left: -300px; /*负值实现反方向移动,即向右移动填充padding-right*/ right: -300px; } </style> </head> <body> <!-- 圣杯布局 --> <div class="container"> <!-- 中间的div必须写在最前面,优先加载 --> <div class="middle">中间弹性区</div> <div class="left">左边栏</div> <div class="right">右边栏</div> </div> </body> </html>
2、双飞翼布局
<!DOCTYPE html> <html> <head> <title>双飞翼布局</title> <meta charset="utf-8"> <style type="text/css"> .left,.middle,.right{ min-height: 130px; float: left; } .left{ background-color: red; width: 200px; margin-left: -100%; } .middle{ background-color: gray; width: 100%; } .right{ background-color: darkblue; width: 300px; margin-left: -300px; } .content{ margin: 0 300px 0 200px; background-color: orange; } </style> </head> <body> <div class="middle"> <div class="content">middle</div> </div> <div class="left">left</div> <div class="right">right</div> </body> </html>
3、flex布局
<!DOCTYPE html> <html> <head> <title>flex实现三栏布局</title> <meta charset="utf-8"> <style type="text/css"> .container{ min-height: 130px; display: flex; } .middle{ background-color: rgba(0,0,255,0.7); /*flex-grow 默认为0 放大比例,填充空白,*/ flex-grow:1; } .left{ background-color: rgba(0,255,0,0.7); /*order默认为0,越小越靠前*/ order: -1; /*项目占据主轴的空间*/ flex-basis: 200px; } .right{ background-color: rgba(255,0,0,0.7); /*项目占据主轴的空间*/ flex-basis: 300px; } </style> </head> <body> <div class="container"> <div class="middle">middle</div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
4、绝对定位
<!DOCTYPE html> <html> <head> <title>绝对定位实现三栏布局</title> <meta charset="utf-8"> <style type="text/css"> .container{ position: relative; } .middle,.left,.right{ top: 0; height: 130px; } .middle{ background-color: red; height: 500px; margin: 0 300px 0 200px; } .left{ background-color: blue; width: 200px; position: absolute; left: 0; } .right{ background-color: green; width: 300px; position: absolute; right: 0; } </style> </head> <body> <div class="container"> <!-- 中间的div必须写在最前面,优先加载 --> <div class="middle">中间弹性区</div> <div class="left">左边栏</div> <div class="right">右边栏</div> </div> </body> </html>