圣杯布局、双飞翼布局效果图
从效果图来看圣杯布局、双飞翼布局效果是一样一样的。
圣杯布局、双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即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;
- 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>
- <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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赏
版权声明:本站所有图片/内容除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!