css一键布局(css多种方式实现双飞翼布局)
类别:Web前端 浏览量:995
时间:2022-04-02 16:33:07 css一键布局
css多种方式实现双飞翼布局圣杯布局、双飞翼布局效果图
从效果图来看圣杯布局、双飞翼布局效果是一样一样的。
圣杯布局、双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即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>
<li class="header">header</li> <li class="container clearfix"> <li class="main">main</li> <li class="left">left</li> <li class="right">right</li> </li> <li class="footer">footer</li>
浮动实现双飞翼布局
<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>
<li class="header">header</li> <li class="container clearfix"> <li class="main"> <li class="main-inner">main</li> </li> <li class="left">left</li> <li class="right">right</li> </li> <li class="footer">footer</li>
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>
<li class="header">header</li> <li class="container clearfix"> <li class="left"> <li class="left-inner">left</li> </li> <li class="main"> <li class="main-inner">main</li> </li> <li class="right"> <li class="right-inner">right</li> </li> </li> <li class="footer">footer</li>
绝对定位实现双飞翼布局
使用绝对定位实现有个小问题:父容器的高度只能由.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; top: 0; left: 0; width: 200px; min-height: 300px; background-color: #f00; } .main{ min-height: 300px; background-color: #c32228; } .right{ position: absolute; top: 0; right: 0; width: 200px; min-height: 300px; background-color: #f90; } </style>
<li class="header">header</li> <li class="container clearfix"> <li class="left">left</li> <li class="main">mian</li> <li class="right">right</li> </li> <li class="footer">footer</li>
使用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>
<li class="header">header</li> <li class="container clearfix"> <li class="left">left</li> <li class="main">main</li> <li class="right">right</li> </li> <li class="footer">footer</li>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
热门推荐
- 阿里云linux服务器怎么进(阿里云Linux主机安装WDCP管理面板包含lamp+lnmp+lanmp环境)
- iis的安装与配置图解教程(windows+IIS6安装及搭建网站服务器环境教程)
- 推荐一款好用的项目管理系统:禅道项目管理系统
- 阿里云服务器公网ip搭建(阿里云服务器无公网如何上网?)
- ASP.NET将Excel数据导入到数据库
- css盒子模型有什么用处(深入理解CSS中的盒子模型)
- 群晖docker搭建代理服务(群晖NAS利用Docker容器搭建KMS激活服务器实现激活windows系统和office操作步骤)
- dedecms栏目内容怎么插入分页符(dedecms自动给已经发布过的文章中的关键词加超链接)
- tomcat运行中找不到路径(Tomcat将配置文件放在外部的解决方法)
- zabbix如何配置监控(zabbix监控mysql的实例方法)