<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双飞翼布局(用于管理系统,淘宝在用,低版本浏览器)</title> <style> *{ margin: 0; padding: 0; } .main{ width: 100%; height: 400px; color: #fff; } .main div{ float: left; height: 600px; background: #eee; } .main .center{ width: 100%; background: green; } .main .content{ width: 100%; padding: 0 250px; } .main .left{ width: 250px; background: blue; position: relative; margin-left: -100%; } .main .right{ width: 250px; background: red; position: relative; margin-left: -250px; } </style> </head> <body> <div class="main"> <div class="center"> <div class="content">中</div> </div> <div class="left">左</div> <div class="right">右</div> </div> </body> </html>
不用CSS3的弹性盒模型实现双飞翼布局
最新推荐文章于 2023-08-23 19:18:37 发布