1 （没有flex之前） 2 <!DOCTYPE html> 3 <html lang="en"> 4 5 <head> 6 <meta charset="UTF-8"> 7 <title></title> 8 <style> 9 body { 10 margin: 0; 11 padding: 0; 12 color: #fff; 13 } 14 15 /* 16 1）设置父元素container的位置 17 2）将主体部分的三个子元素都设置左浮动 18 3）设置main宽度为100%,让其单独占满一行 19 4）设置left和right 负的外边距 20 5）使用相对定位移动left和right到对应的位置 21 */ 22 23 .container { 24 min- 400px; 25 height: 200px; 26 background-color: greenyellow; 27 /*腾出位置 放置左右*/ 28 padding: 0 200px; 29 } 30 31 .left, 32 .right { 33 200px; 34 height: 200px; 35 background-color: red; 36 float: left; 37 } 38 39 .main { 40 100%; 41 height: 200px; 42 background-color: blue; 43 float: left; 44 } 45 46 .left { 47 margin-left: -100%; 48 /* 中间的宽度 */ 49 position: relative; 50 /* 自身的宽度 */ 51 left: -200px; 52 } 53 54 .right { 55 /* 被宽度挤下来了 */ 56 margin-left: -200px; 57 position: relative; 58 right: -200px; 59 } 60 </style> 61 </head> 62 63 <body> 64 <!--容器--> 65 <div class="container"> 66 <div class="main"> 67 中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏 68 </div> 69 <div class="left">左边栏</div> 70 <div class="right">右边栏</div> 71 </div> 72 </body> 73 74 </html>