实现双飞翼布局的五种方法
- 浮动
- 绝对定位
- flex布局
- table
- grid
浮动
浮动的实现，就是直接将左右两边的块实现左右浮动，中间实现自适应
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>浮动</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 section div { 15 height: 200px; 16 } 17 18 .left { 19 width: 300px; 20 float: left; 21 background-color: pink; 22 } 23 24 .right { 25 width: 300px; 26 float: right; 27 background-color: blue; 28 } 29 30 .center { 31 background-color: red; 32 } 33 </style> 34 </head> 35 36 <body> 37 <section> 38 <div class="left"></div> 39 <div class="right"></div> 40 <div class="center"> 41 浮动布局 42 </div> 43 </section> 44 </body> 45 46 </html>
绝对定位
实现方法将三块div实现绝对定位，将左右两块div分别设置left和right为0，中间实现left和right各为左右两边的宽度
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>绝对定位</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 section div { 15 height: 200px; 16 position: absolute; 17 } 18 19 .left { 20 width: 300px; 21 left: 0; 22 background-color: pink; 23 } 24 25 .right { 26 width: 300px; 27 right: 0; 28 background-color: blue; 29 } 30 31 .center { 32 left: 300px; 33 right: 300px; 34 background-color: red; 35 } 36 </style> 37 </head> 38 39 <body> 40 <section> 41 <div class="left"></div> 42 <div class="center"> 43 absolute布局 44 </div> 45 <div class="right"></div> 46 </section> 47 </body> 48 49 </html>
flex布局
实现方式：将外层的块级元素设置flex，将中间的块级元素设置为flex：1
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>flex</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 /* 外边框增加display：flex */ 14 15 section { 16 display: flex; 17 } 18 19 section div { 20 height: 200px; 21 } 22 23 .left { 24 width: 300px; 25 background-color: pink; 26 } 27 28 .right { 29 width: 300px; 30 background-color: blue; 31 } 32 33 .center { 34 flex: 1; 35 background-color: red; 36 } 37 </style> 38 </head> 39 40 <body> 41 <section> 42 <div class="left"></div> 43 <div class="center"> 44 flex布局 45 </div> 46 <div class="right"></div> 47 </section> 48 </body> 49 50 </html>
表格布局
实现方式：将外层块级元素设置display:table，分别设置左右两个块级元素固定宽，中间块级元素自适应
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>表格布局</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 /* 外边框设置table布局，并设置宽度为100% */ 14 15 section { 16 display: table; 17 width: 100%; 18 } 19 20 section div { 21 height: 200px; 22 display: table-cell; 23 } 24 25 .left { 26 width: 300px; 27 background-color: pink; 28 } 29 30 .right { 31 width: 300px; 32 background-color: blue; 33 } 34 35 .center { 36 background-color: red; 37 } 38 </style> 39 </head> 40 41 <body> 42 <section> 43 <div class="left"></div> 44 <div class="center"> 45 table布局 46 </div> 47 <div class="right"></div> 48 </section> 49 </body> 50 51 </html>
grid布局
实现方式：外边框设置grid布局，并设置宽度为100% ，设置grid-template-rows和grid-template-columns
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>grid布局</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 section { 15 display: grid; 16 grid-template-rows: 200px; 17 grid-template-columns: 300px auto 300px; 18 width: 100%; 19 } 20 21 .left { 22 background-color: pink; 23 } 24 25 .right { 26 background-color: blue; 27 } 28 29 .center { 30 background-color: red; 31 } 32 </style> 33 </head> 34 35 <body> 36 <section> 37 <div class="left"></div> 38 <div class="center"> 39 grid布局 40 </div> 41 <div class="right"></div> 42 </section> 43 </body> 44 45 </html>