三列布局
双飞翼布局的前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡问题的解决方案有所不同
<!DOCTYPE html> <html lang="en"> <head> <style> .main,.left,.right{ float: left; min-height: 200px; height: 200px; width: 100%; } .main::after { display: table; content: ''; clear: both; zoom: 1; } .main { background: red; } .content{ padding-left:200px; } .left{ width: 200px; margin-left: -100%; background: #DED68C; } .right{ width: 400px; margin-left: -400px; background: #94BBDA; } </style> </head> <body> <div class="main"> <div class="content"> 11111111111111 </div> </div> <div class="left">11111111111</div> <div class="right">33333333333</div> </body> </html>转载请标明出处:双飞翼布局
文章来源: 双飞翼布局