<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html * { margin: 0; padding: 0; } div { min-height: 100px; text-align: center; } .mt20 { margin-top: 20px; } .layout .left { float: left; background: yellow; width: 300px; } .layout .right { float: right; width: 300px; background: blue; } .layout .center { background: red; } .absolute .left { position: absolute; width: 300px; background: yellow; left: 0px; } .absolute .right { position: absolute; width: 300px; background: blue; right: 0px; } .absolute .center { margin: 0 300px; background: red; } .flexbox { display: flex; } .flexbox .left { width: 300px; background: yellow; } .flexbox .right { width: 300px; background: blue; } .flexbox .center { background: red; flex: 1; } .table { display: table; width: 100%; height: 100px; } .table div { display: table-cell; } .table .left { width: 300px; background: yellow; } .table .right { width: 300px; background: blue; } .table .center { background: red; } .grid { display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns: 300px auto 300px; /*三个值代表三列第一列300px 中间自适用 右边300px 每列宽*/ } .grid .left { background: yellow; } .grid .right { background: blue; } .grid .center { background: red; } </style> <body> <section class="layout"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>浮动方案</h1> </div> </section> <section class="absolute mt20"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>绝对定位方案</h1> </div> </section> <section class="flexbox mt20"> <div class="left"></div> <div class="center"> <h1>flex布局方案</h1> </div> <div class="right"></div> </section> <section class="table mt20"> <div class="left"></div> <div class="center"> <h1>table布局方案</h1> </div> <div class="right"></div> </section> <section class="grid mt20"> <div class="left"></div> <div class="center"> <h1>grid布局方案</h1> </div> <div class="right"></div> </section> </body> </html>