双飞翼布局
实现双飞翼布局的五种方法
- 浮动
- 绝对定位
- flex布局
- table
- grid
浮动
浮动的实现，就是直接将左右两边的块实现左右浮动，中间实现自适应
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浮动</title> <style> * { margin: 0; padding: 0; } section div { height: 200px; } .left { width: 300px; float: left; background-color: pink; } .right { width: 300px; float: right; background-color: blue; } .center { background-color: red; } </style></head><body> <section> <div class="left"></div> <div class="right"></div> <div class="center"> 浮动布局 </div> </section></body></html>绝对定位
实现方法将三块div实现绝对定位，将左右两块div分别设置left和right为0，中间实现left和right各为左右两边的宽度
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绝对定位</title> <style> * { margin: 0; padding: 0; } section div { height: 200px; position: absolute; } .left { width: 300px; left: 0; background-color: pink; } .right { width: 300px; right: 0; background-color: blue; } .center { left: 300px; right: 300px; background-color: red; } </style></head><body> <section> <div class="left"></div> <div class="center"> absolute布局 </div> <div class="right"></div> </section></body></html>flex布局
实现方式：将外层的块级元素设置flex，将中间的块级元素设置为flex：1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex</title> <style> * { margin: 0; padding: 0; } /* 外边框增加display：flex */ section { display: flex; } section div { height: 200px; } .left { width: 300px; background-color: pink; } .right { width: 300px; background-color: blue; } .center { flex: 1; background-color: red; } </style></head><body> <section> <div class="left"></div> <div class="center"> flex布局 </div> <div class="right"></div> </section></body></html>表格布局
实现方式：将外层块级元素设置display:table，分别设置左右两个块级元素固定宽，中间块级元素自适应
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格布局</title> <style> * { margin: 0; padding: 0; } /* 外边框设置table布局，并设置宽度为100% */ section { display: table; width: 100%; } section div { height: 200px; display: table-cell; } .left { width: 300px; background-color: pink; } .right { width: 300px; background-color: blue; } .center { background-color: red; } </style></head><body> <section> <div class="left"></div> <div class="center"> table布局 </div> <div class="right"></div> </section></body></html>grid布局
实现方式：外边框设置grid布局，并设置宽度为100% ，设置grid-template-rows和grid-template-columns
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>grid布局</title> <style> * { margin: 0; padding: 0; } section { display: grid; grid-template-rows: 200px; grid-template-columns: 300px auto 300px; width: 100%; } .left { background-color: pink; } .right { background-color: blue; } .center { background-color: red; } </style></head><body> <section> <div class="left"></div> <div class="center"> grid布局 </div> <div class="right"></div> </section></body></html>