三栏式布局
要求:左右两栏宽度固定,中间一栏根据父元素宽度填充满,父元素高度取决于三个子元素中最高的高度。
采用两种方法用CSS实现了三栏式布局,下面分别介绍一下这两种方法
方法一:
- 左列:float:left;
- 右列:float:right;
- 中间列:margin-left:左宽度,margin-right:右宽度;
- 父元素:overflow:hidden(清除浮动)
- 详细代码如下
#container{
border:1px solid #999;
background:#eee;
padding:20px;
overflow:hidden;
}
/*左边*/
#container .left{
float:left;
width:160px;
background:#fff;
border:1px solid #999;
}
/*右边*/
#container .right{
float:right;
background:#fff;
width:120px;
border:1px solid #999;
}
/*中间自适应部分*/
#container .center{
border:1px solid #999;
background:#fff;
/*为了使中间自适应*/
margin-left:160px;
margin-right:120px;
}
方法二:又称为双飞翼布局
- 父元素:overflow:hidden;
- 中间列:float:left; width:100%; padding:0 220px 0 190px;
- 左列: float:left; width:190px; margin-left:-100%(使其移动到上一行的最左边); position:relative;left:-190px;
- 右列: float:left; width:220px; margin-left:-220px(使其移动到上一行的最右边); position:relative;right:-220px;
- 详细代码如下
.left {
float: left;
width: 190px;
background:red;
margin-left:-100%;
position:relative;
left:-190px;
}
.right {
float:left;
width: 220px;
background:blue;
margin-left:-220px;
position:relative;
right:-220px;
}
.center {
float: left;
width: 100%;
background:green;
}
#container{
padding:20px 220px 20px 190px;
overflow:hidden;
border:1px solid #999;
}
两种方法的区别
- 由于方法二三列全使用float定位,当浏览器缩小到一定范围,三列布局会变为两列甚至一列
- 而方法一中,中间列未采用float定位,所以无论浏览器怎么缩小,仍然是三列布局,只是中间列的宽度会越来越窄。
CSS中:position的取值及各自定位方式
-
static:
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
-
relative:
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。不会脱离文档流,相对于元素原来的正常位置进行定位
-
absolute:
元素框从文档流完全删除,即:脱离了文档流。
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样 。
元素定位后生成一个块级框,而不论原来它在正常流中是何种类型的框。
-
fixed:
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
即:元素脱离文档流,相对于浏览器视口进行定位。