1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 body{ 8 margin: 0; 9 padding: 0; 10 color: #000; 11 } 12 13 /* 14 1）左右两个div浮动，中间的div放在上面 15 2）通过margin-left调整到一行 16 3）中间div添加一个子节点，设置margin调整位置 17 */ 18 .container{ 19 min- 440px; 20 height: 200px; 21 background-color: greenyellow; 22 } 23 24 .left,.right{ 25 200px; 26 height: 200px; 27 background-color: red; 28 float: left; 29 } 30 31 .main{ 32 100%; 33 height: 200px; 34 background-color: blue; 35 float: left; 36 } 37 38 .main-content{ 39 margin: 0 200px; 40 } 41 42 .left{ 43 margin-left: -100%; 44 } 45 46 .right{ 47 margin-left: -200px; 48 } 49 50 </style> 51 </head> 52 <body> 53 <!--容器--> 54 <div class="container"> 55 <div class="main"> 56 <div class="main-content">中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏中间栏</div> 57 </div> 58 <div class="left">左边栏</div> 59 <div class="right">右边栏</div> 60 </div> 61 </body> 62 </html>