css实现两列容器等高布局,css2.1——三列布局、圣杯布局、双飞翼布局、伪等高布局...

三列布局

(1)两边固定 当中自适应

(2)当中列要完整显示

(3)当中列要优先加载

1. 定位方式(不好，下面说明原因)

*{

margin: 0;

padding: 0;

}

body{

/*2*left+right*/

min-width: 600px;

}

div{

height: 100px;

}

#left,#right{

width: 200px;

background: pink;

}

#middle{

background: deeppink;

padding: 0 200px;

}

/*开启定位*/

#left{

position: absolute;

left: 0;

top: 0;

}

#right{

position: absolute;

right: 0;

top: 0;

}

left

middle

right

当改变浏览器大小后，middle内容会被压缩掉

image.png

2. 浮动方式

*{

margin: 0;

padding: 0;

}

body{

/*2*left+right*/

min-width: 600px;

}

div{

height: 100px;

}

#left,#right{

width: 200px;

background: pink;

}

#middle{

background: deeppink;

}

/*浮动*/

#left{

float: left;

}

#right{

float: right;

}

left

right

middle

缺点：网页最后加载middle,用户体验差

总结

定位会提升层级，对以后页面编写带来困扰，不建议用定位对网页做框架上的布局。

浮动实现无法实现主列middle的优先加载

因此引出圣杯布局

3. 圣杯布局

使用浮动:搭建完整的布局框架

使用margin 为负值:调整旁边两列的位置(使三列布局到一行上)

使用相对定位:调整旁边两列的位置(使两列位置调整到两头)

完整代码：

*{

margin: 0;

padding: 0;

}

body{

min-width: 600px;

}

#header,#footer{

height: 20px;

text-align: center;

border: 1px solid deeppink;

background: gray;

}

#content{

padding: 0 200px;

}

#content .middle{

float: left;

width: 100%;

background: pink;

}

#content .left{

position: relative;

left:-200px;

margin-left: -100%;

float: left;

width: 200px;

background: yellow;

}

#content .right{

position: relative;

right:-200px;

margin-left:-200px;

float: left;

width: 200px;

background: yellow;

}

.clearfix{

*zoom: 1;

}

.clearfix:after{

content: "";

display: block;

clear: both;

}

header

middle

left

right

footer

效果：

image.png

4. 伪等高布局

解决高度不统一问题

image.png

添加代码

#content .left,#content .right,#content .middle{

padding-bottom: 10000px;

margin-bottom: -10000px;

}

#content{

overflow: hidden;

}

完整代码为：

*{

margin: 0;

padding: 0;

}

#header,#footer{

height: 20px;

text-align: center;

border: 1px solid deeppink;

background: gray;

}

#content{

overflow: hidden;

padding: 0 200px;

}

#content .left{

position: relative;

left:-200px;

margin-left: -100%;

float: left;

width: 200px;

background: yellow;

}

#content .right{

position: relative;

right:-200px;

margin-left:-200px;

float: left;

width: 200px;

background: yellow;

}

#content .middle{

float: left;

width: 100%;

background: pink;

}

.clearfix{

*zoom: 1;

}

.clearfix:after{

content: "";

display: block;

clear: both;

}

#content .left,#content .right,#content .middle{

padding-bottom: 10000px;

margin-bottom: -10000px;

}

header

middle

middle

middle

middle

middle

middle

middle

middle

middle

middle

left

left

left

left

left

right

footer

效果为

image.png

5. 双飞翼布局

双飞翼、圣杯实现的对比:

俩种布局方式都是把主列放在文档流最前面，使主列优先加载。

两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。

两种布局方式的不同之处在于如何处理中间主列的位置：

圣杯布局是利用父容器的左、右内边距+两个从列相对定位；

双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

双飞翼布局完整代码：

*{

margin: 0;

padding: 0;

}

body{

min-width: 600px;

}

/*头部 脚部样式*/

#header,#footer{

border: 1px solid;

background: gray;

text-align: center;

}

/*三列的伪等高布局*/

#content .middle,#content .left,#content .right{

/*padding-bottom:10000px ;

margin-bottom: -10000px;*/

height: 50px;

line-height: 50px;

float: left;

}

/*双飞翼布局*/

#content{

overflow: hidden;

}

#content .middle{

width: 100%;

background: deeppink;

}

#content .middle .m_inner{

padding: 0 200px;

}

#content .left,#content .right{

background: pink;

width: 200px;

text-align: center;

}

#content .left{

margin-left: -100%;

}

#content .right{

margin-left: -200px;

}

header

middle

left

right

footer