【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

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值