原理:1. 三个盒子的都浮动
2.中间盒子套一个盒子(父元素),width=100%,铺满一行
3.左侧盒子margin-left=-100%;右侧盒子margin-right=-(右侧盒子的宽度)px,这样将三个哦盒子拉到一排上。
4.中间盒子的子元素margin-left:左侧盒子的宽度,margin-right:右侧盒子的宽度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三栏布局--双飞翼布局</title> <style> *{ margin: 0; padding: 0; } .container{ width: 600px; height: 200px; margin: 0 auto; box-sizing: border-box; border: 1px solid red; } .middle ,.left ,.right{ float: left; } .middle{ width: 100%; } .middle_inner{ height: 150px; background-color: gold; margin-left: 100px; margin-right: 100px; } .left{ width: 100px; height: 170px; margin-left: -100%; background-color: purple; } .right{ width: 100px; height: 170px; margin-left: -100px; background-color: pink; } </style> </head> <body> <div class="container"> <div class="middle"> <div class="middle_inner">中间布局</div> </div> <div class="left">左侧布局</div> <div class="right">右侧布局</div> </div> </body> </html>