最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css 左列自适应宽度的一行两列布局
时间：2022-07-02 12:17:11 编辑：袖梨 来源：一聚教程网
今天想实现一行两列的布局，左列宽度自适应，右列宽度保持不变。HTML的写法是：
左列
右列
现在加CSS，要实现的效果是mian是可变的，right层宽度为200px，并且固定不变，要让left的宽度随main的变化而变化。CSS的写法是：
#main{width:100%;background:#CCCCCC;}
#left{width:100%;margin-left:-200px;float:left;background:red;}
#right{float:right;background:green;}
基本上达到所要的效果了，#left的宽度设置为100%，加个margin-left:-200px;让它向左移动200px，好让它腾出200px的空间塞进right层。但有一个问题，左列被移动的那200px隐藏了，看不到里面的东西，所以还必须增加一个DIV来辅助。
修改了一下，HTML代码，变成：
左列
右列
现在要让innerLeft把左边被隐藏的部分弄出来，所以得再加个margin-left:200px，修改后的CSS代码如下：
#main{background:#CCCCCC;}
#left{width:100%;margin-left:-200px;float:left;background:red;}
#innerLeft{margin-left:200px;}
#right{float:right;background:green;}
相关文章
- 王者荣耀S38赛季有什么更新 12-25
- 王者荣耀S38赛季有什么更新 王者荣耀S38赛季更新内容介绍 12-25
- 世界之外12.25有什么更新 世界之外12月25日更新内容介绍 12-25
- 光遇12.25红石碎片在哪里 光遇12月25日红石碎片位置攻略 12-25
- 奇迹暖暖绚光引途第二天怎么玩 绚光引途day2庆祝之舞搭配攻略 12-25
- 无限暖暖拍照打卡位置在哪里 无限暖暖世界巡游位置全攻略 12-25