<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>5种三栏布局的实现方式</title> </head> <style type="text/css"> * { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; } /* 1、使用absolute实现 .left, .right { position: absolute; top: 0; 200px; height: 100%; } .left { left: 0; background: yellow; } .right { right: 0; background: green; } .center { margin: 0 210px; height: 100%; background: blue; } */ /* 2、使用左右负margin实现 .center { 100%; height: 100%; float: left; } .box { height: 100%; margin: 0 210px; background: blue; } .left, .right { 200px; height: 100%; float: left; } .left { margin-left: -100%; background: yellow; } .right { margin-left: -200px; background: green; } */ /* 3、使用左右浮动实现 .left, .right { 200px; height: 100%; } .left { float: left; background: yellow; } .right { float: right; background: green; } .center { height: 100%; margin: 0 210px; background: blue; } */ /* 4、使用flex实现 .box { display: flex; 100%; height: 100%; } .center { background: blue; flex: 1; } .left, .right { flex: 0 0 200px; background: red; } */ /* 5、使用table实现 .box { display: table; height: 100%; 100%; } .left, .center, .right{ display: table-cell; height: 100%; } .left, .right{ 200px; background: blue; } .center{ background: red; } */ </style> <body> <div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> <!-- 2、使用左右负margin实现 <div class="center"> <div class="box"></div> </div> <div class="left"></div> <div class="right"></div> --> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> </script> </body> </html>