<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3-columns</title> <style> * { margin: 0; padding: 0; } section { margin: 20px auto 10px; width: 700px; border: 1px solid #000; } </style> </head> <body> <!--float实现三列布局--> <!--优点：实现简单，兼容性好--> <!--缺点：脱离文档流，另外需要注意清除浮动--> <section class="float-3-columns"> <style> .float-3-columns .left { float: left; width: 200px; background: pink; } .float-3-columns .right { float: right; width: 200px; background: orange; } .float-3-columns .main { background: #b5d491; margin-left: 200px; margin-right: 200px; } </style> <article class="wrap"> <div class="left">left content</div> <div class="right">right content</div> <div class="main"> <p>main content</p> <p>main content</p> <p>main content</p> </div> </article> </section> <!--absolute实现三列布局--> <!--优点：实现简单，兼容性好--> <!--缺点：脱离文档流，影响很大--> <section class="absolute-3-columns"> <style> .absolute-3-columns .wrap { position: relative; } .absolute-3-columns .left { position: absolute; left: 0; background: pink; width: 200px; } /*如果main在right前必须要加top:0,main在right后则不需要*/ .absolute-3-columns .right { position: absolute; right: 0; top: 0; background: orange; width:200px; } .absolute-3-columns .main { background: #b5d491; margin-left: 200px; margin-right: 200px } </style> <article class="wrap"> <div class="left">left content</div> <div class="main"> <p>main content</p> <p>main content</p> <p>main content</p> </div> <div class="right">right content</div> </article> </section> <!--flex实现三列布局--> <!--优点：简单，适用性强，专门用于布局--> <!--缺点：兼容性--> <section class="flex-3-columns"> <style> .flex-3-columns .wrap{ display: flex; } .flex-3-columns .left { width: 200px; background: pink; } .flex-3-columns .right { width: 200px; background: orange; } .flex-3-columns .main { flex: 1; background: #b5d491; } </style> <article class="wrap"> <div class="left">left content</div> <div class="main"> <p>main content</p> <p>main content</p> <p>main content</p> </div> <div class="right">right content</div> </article> </section> <!--grid实现三列布局--> <!--优点：简单，适用性强，专门用于布局--> <!--缺点：兼容性--> <section class="grid-3-columns"> <style> .grid-3-columns .wrap { display: grid; grid-template-columns: 200px auto 200px; } .grid-3-columns .left { background: pink; } .grid-3-columns .right { background: orange; } .grid-3-columns .main { background: #b5d491; } </style> <article class="wrap"> <div class="left">left content</div> <div class="main"> <p>main content</p> <p>main content</p> <p>main content</p> </div> <div class="right">right content</div> </article> </section> <!--table实现3列布局--> <!--优点：兼容性好--> <!--缺点：特性比较复杂--> <section class="table-3-columns"> <style> /*tableb默认宽度自适应，需要加100%*/ .table-3-columns .wrap { display: table; width: 100%; } .table-3-columns .left { display: table-cell; width: 200px; background: pink; } .table-3-columns .right { display: table-cell; width: 200px; background: orange; } .table-3-columns .main { display: table-cell; background: #b5d491; } </style> <article class="wrap"> <div class="left">left content</div> <div class="main"> <p>main content</p> <p>main content</p> <p>main content</p> </div> <div class="right">right content</div> </article> </section> </body> </html>