双飞翼 html 布局,css实现双飞翼布局的四种方法（附代码）

本篇文章给大家带来的内容是关于css实现双飞翼布局的四种方法(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

圣杯布局、双飞翼布局效果图

从效果图来看圣杯布局、双飞翼布局效果是一样一样的。

圣杯布局、双飞翼布局就是左右两侧宽度固定，中间内容宽度自适应，即100%

圣杯布局

*{

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%;

mi