您的位置:首页 > Web前端 > CSS

CSS实现三栏式布局

2016-07-02 10:45 459 查看

三栏式布局

要求:左右两栏宽度固定,中间一栏根据父元素宽度填充满,父元素高度取决于三个子元素中最高的高度。

采用两种方法用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,不过其包含块是视窗本身。

即:元素脱离文档流,相对于浏览器视口进行定位。 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息