css多种方式实现双飞翼布局
建站知识 2021-07-03 08:42www.168986.cn长沙网站建设
圣杯布局、双飞翼布局效果图
从效果图来看圣杯布局、双飞翼布局效果是一样一样的。
圣杯布局、双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即100%
圣杯布局
<style> { margin: 0; padding: 0; box-sizing: border-box; } .clearfix:before, .clearfix:after{ display: table; content: " "; clear: both; } .container{ padding: 0 200px; } .header, .footer{ height: 200px; font-size: 28px; background-color: #f3f3f3; } .left{ position: relative; / 2、将.left拉到最左边,否则.main的左侧会有200px的空白 / left: -200px; float: left; width: 200px; min-height: 300px; / 1、将.left拉到最左边,原来.left是掉下去的 / margin-left: -100%; background-color: #f00; } .main{ float: left; width: 100%; min-height: 300px; background-color: #c32228; } .right{ position: relative; / 2、将.right拉到最右边,否则.main的右侧会有200px的空白 / right: -200px; float: left; width: 200px; //1、将.right拉到最右边,原来.right是掉下去的 / margin-left: -200px; min-height: 300px; background-color: #f90; } </style>
<div class="header">header</div> <div class="container clearfix"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> <div class="footer">footer</div>
浮动实现双飞翼布局
<style> { margin: 0; padding: 0; box-sizing: border-box; } .clearfix:before, .clearfix:after{ display: table; content: " "; clear: both; } .header, .footer{ height: 200px; font-size: 28px; background-color: #f3f3f3; } .left{ float: left; width: 200px; min-height: 300px; / 将.left拉到最左边,原来.left是掉下去的 / margin-left: -100%; background-color: #f00; } .main{ float: left; width: 100%; min-height: 300px; / .left、.right各占了200px,需要将其抵消掉 / padding: 0 200px; background-color: #c32228; } .right{ float: left; width: 200px; / 将.right拉到最右边,原来.right是掉下去的 / margin-left: -200px; min-height: 300px; background-color: #f90; } </style>
<div class="header">header</div> <div class="container clearfix"> <div class="main"> <div class="main-inner">main</div> </div> <div class="left">left</div> <div class="right">right</div> </div> <div class="footer">footer</div>
table-cell实现双飞翼布局(IE8也兼容哦~)
<style> { margin: 0; padding: 0; box-sizing: border-box; } .container{ display: table; } .header, .footer{ height: 200px; font-size: 28px; background-color: #f3f3f3; } .left, .right, .main{ / 外层容器使用table-cell布局,设置元素为table-cell布局后它们就能在一行显示了,display: table-cell;设置宽度无效, 他们的宽度由内容撑开。 / display: table-cell; } .left-inner{ width: 200px; min-height: 300px; background-color: #f00; } .main{ width: 100%; } .main-inner{ min-height: 300px; background-color: #c32228; } .right-inner{ width: 200px; min-height: 300px; background-color: #f90; } </style>
<div class="header">header</div> <div class="container clearfix"> <div class="left"> <div class="left-inner">left</div> </div> <div class="main"> <div class="main-inner">main</div> </div> <div class="right"> <div class="right-inner">right</div> </div> </div> <div class="footer">footer</div>
绝对定位实现双飞翼布局
使用绝对定位实现有个小问题父容器的高度只能由.main的高度来决定
<style> { margin: 0; padding: 0; box-sizing: border-box; } .container{ position: relative; padding: 0 200px; } .header, .footer{ height: 200px; font-size: 28px; background-color: #f3f3f3; } .left{ position: absolute; : 0; left: 0; width: 200px; min-height: 300px; background-color: #f00; } .main{ min-height: 300px; background-color: #c32228; } .right{ position: absolute; : 0; right: 0; width: 200px; min-height: 300px; background-color: #f90; } </style>
<div class="header">header</div> <div class="container clearfix"> <div class="left">left</div> <div class="main">mian</div> <div class="right">right</div> </div> <div class="footer">footer</div>
使用flex实现双飞翼布局(有兼容性问题)
<style> { margin: 0; padding: 0; box-sizing: border-box; } .clearfix:before, .clearfix:after{ display: table; content: " "; clear: both; } .container{ display: flex; } .header, .footer{ height: 200px; font-size: 28px; background-color: #f3f3f3; } .left{ flex: 0 0 200px; width: 200px; min-height: 300px; background-color: #f00; } .main{ flex: 1; width: 100%; min-height: 300px; background-color: #c32228; } .right{ flex: 0 0 200px; width: 200px; min-height: 300px; background-color: #f90; } </style>
<div class="header">header</div> <div class="container clearfix"> <div class="left">left</div> <div class="main">main</div> <div class="right">right</div> </div> <div class="footer">footer</div>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:CSS中的四种引用方式
下一篇:css 盒模型 文档流 几种清除浮动的方法实例详解
长沙网站设计
- 如何进行东阳SEO关键词优化?
- 边坝哪有关键词排名优化:提升你的网站流量与
- 安国百度优化服务:提升您的在线可见性
- 阜康新手做SEO怎么做
- 山西seo网站排名关键词优化:提升您网站曝光率
- 临沂seo网站排名关键词优化:提高你的网站可见
- 广西SEO网站推广怎样付费比较合理
- 双辽SEO网站推广:提升你的网站可见性与流量
- 辽宁企业网站优化购买方式有哪些
- 提升宝清百度SEO排名的实用技巧与策略
- 静宁百度SEO排名:提升您网站曝光率的关键策略
- 彭州百度SEO排名的提升策略和实施指南
- 广南百度关键词SEO:提升网站排名的关键策略
- 辽宁关键词优化怎么做论坛营销
- 吉林百度seo排名如何做到让用户满意
- 内黄百度优化服务:提升在线可见性的关键