//第一种办法：浮动(块级格局独占一行)<div class="wrapper_float"> <div class="float_left">1</div> <div class="float_center">2</div> <div class="float_right">3</div></div><style> .wrapper_float{ height:100px; width:100%; } .wrapper_float .float_left{ width:300px; float:left; background: red; height:100%; } .wrapper_float .float_center{ width:300px; float:right; background: blue; height:100%; } .wrapper_float .float_right{ background: beige; height:100%; } </style>
//第二种办法：相对定位<div class="wrapper_absolute"> <div class="absolute_left">1</div> <div class="absolute_center">2</div> <div class="absolute_right">3</div></div><style> .wrapper_absolute{ height:100px; position:relative; } .absolute_left{ position:absolute; left:0; width:300px; } .absolute_right{ position:absolute; right:0; width:300px; } .absolute_center{ position:absolute; left:300px; right:300px; }</style>
//第三种办法：flex布局<div class="wrapper_flex"> <div class="flex_left">1</div> <div class="flex_center">2</div> <div class="flex_right">3</div></div><style> .wrapper_flex{ display:flex; height:100px; } .flex_left, .flex_right{ width:300px } .flex_center{ flex:1 } </style>
//第四种办法：table<div class="wrapper_table"> <div class="table_left">1</div> <div class="table_center">2</div> <div class="table_right">3</div></div><style> .wrapper_table{ display: table; height:100px; width:100%; } .table_left,.table_right{ width:300px; display: table-cell; background-color: aliceblue; } .table_center{ display: table-cell; }</style>
//第五种办法：grid<div class="wrapper_grid"> <div class="grid_left">1</div> <div class="grid_center">2</div> <div class="grid_right">3</div></div><style> .wrapper_grid{ display:grid; width:100%; grid-template-rows:100px; grid-template-columns:300px auto 300px; }</style>
优缺点：
浮动：兼容性好，易脱离文本流
相对定位：快捷，有效性差
flex布局：解决上述两个问题
table表格布局：兼容性好，单个模块高度增高的时候，其余模块的高度也随着增高
网格布局：缩小代码量
高度不固定时，flex布局，table布局仍然能够实现