一,双飞翼布局
左右两边固定,中间可以随着浏览器放大和缩小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>双飞翼布局</title> <style> * { margin: 0; padding: 0; } .main .container { width: 100%; } .main .container .contain { background: blue; margin-left: 200px; margin-right: 200px; } .main .left { width: 200px; background: pink; margin-left: -100%; } .main .right { width: 200px; margin-left: -200px; background: red; } .main>div { float: left; } </style> </head> <body> <div class="main"> <div class="container"> <div class="contain">中间</div> </div> <div class="left">左边</div> <div class="right">右边</div> </div> </body> </html>
二,圣杯布局
头部和尾部,左边,右边固定,中间可以随浏览器放大和缩小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圣杯布局</title> <style> * { margin: 0; padding: 0; } .container { display: flex; flex-direction: column; height: 100vh; } header { background: red; } section { background: pink; flex: 1; display: flex; } footer { background: blue; } .left, .right { background: orange; flex: 0 0 200px; } .content { background: olivedrab; flex: 1; } </style> </head> <body> <div class="container"> <header>头部</header> <section> <div class="left">左边</div> <div class="content">中间</div> <div class="right">右边</div> </section> <footer>尾部</footer> </div> </body> </html>
原文地址:https://www.cnblogs.com/jxnc/p/12376700.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。