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,不过其包含块是视窗本身。
即:元素脱离文档流,相对于浏览器视口进行定位。
相关文章推荐
- 双飞翼布局
- HTML-双飞翼布局&Logo优化
- 【ibokan】双飞翼布局实现代码
- 圣杯布局、双飞翼布局
- CSS 圣杯布局和双飞翼布局
- CSS中经典的双飞翼布局(
- CSS中的圣杯布局,以及圣杯布局与双飞翼布局的区别
- 双飞翼布局(圣杯布局)
- CSS 布局经典问题初步整理
- 圣杯布局/双飞翼布局
- 双飞翼布局和常见三角
- 圣杯布局和双飞翼布局
- 圣杯与双飞翼布局代码总结
- CSS三栏自适应布局
- 圣杯布局 VS 双飞翼布局
- 【CSS布局】三栏式布局,左右定宽,中间内容区域自适应
- css布局——双飞翼布局和圣杯布局
- 圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例
- 两列布局的多种方式
- 圣杯布局和双飞翼布局