首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

【css格局】右侧固定宽度,左侧自适应布局

2013-01-01 
【css布局】右侧固定宽度,左侧自适应布局简单的需求,左侧自适应布局,右侧固定宽度360px。三种方法实现:1. 右

【css布局】右侧固定宽度,左侧自适应布局

简单的需求,左侧自适应布局,右侧固定宽度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

?

?

?

?

热点排行