日期:2014-05-17 浏览次数:20617 次
简单的需求,左侧自适应布局,右侧固定宽度360px。
三种方法实现:
1. 右栏float:right、左栏margin-right:360px;
注意:左栏要写在右栏后面
2. 左右栏都绝对定位、左栏margin-right:360px;
1、2缺点在于底部不能对齐,但是兼容所有浏览器。
3. 弹性盒布局、外层元素display:box、左侧元素:box-flex:1;
缺点在于兼容性,使用css3 盒布局,对于ie9以下浏览器无法正常显示
?
测试地址:http://iamnotfeng.duapp.com/css_layout/2columns-1.html
?
?
?
?