左边宽度固定，右边自适应
HTML结构
固定宽度
自适应宽度
方法1：左侧div设置成浮动：float: left，右侧div宽度会自拉升适应
.outer {
width: 100%;
height: 500px;
background-color: yellow;
}
.left {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.right {
height: 200px;
background-color: blue;
}
左边浮动,右边只给高度即可方法2：对右侧:div进行绝对定位，然后再设置right=0，即可以实现宽度自适应
【左边宽度固定，右边自适应】绝对定位元素的第一个高级特性就是其具有自动动伸缩的功能，当我们将
width 设置为auto 的时候（或者不设置，默认为auto ），绝对定位元
素会根据其left 和right 自动伸缩其大小
.outer {
width: 100%;
height: 500px;
background-color: yellow;
position: relative;
}
.left {
width: 200px;
height: 200px;
background-color: red;
}
.right {
height: 200px;
background-color: blue;
position: absolute;
left: 200px;
top:0;
right: 0;
}方法3：将左侧div进行绝对定位，然后右侧div设置margin-left: 200px
.outer {
width: 100%;
height: 500px;
background-color: yellow;
position: relative;
}
.left {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
.right {
height: 200px;
background-color: blue;
margin-left: 200px;
}方法4：使用flex布局
.outer {
width: 100%;
height: 500px;
background-color: yellow;
display: flex;
flex-direction: row;
}
.left {
width: 200px;
height: 200px;
background-color: red;
}
.right {
height: 200px;
background-color: blue;
flex: 1;
}推荐阅读
- 记录iOS生成分享图片的一些问题，根据UIView生成固定尺寸的分享图片
- 高效能慢生活18天
- 左边怪人
- js生成固定时间间隔的时间值-每秒递增-分钟递增-分小时递增
- 【每日一诗】41则·青草辫子
- eyoucms|eyoucms arclist循环中，判断如果是第一个li，则添加固定的css，否则不加
- 换手行吗（）
- el-table表格拖动列记住列宽度功能（刷新页面还在）
- Microsoft|Microsoft SQL Server Management Studio 18中左边工具栏没有了怎么办
- Android开发经验之获取画在画布上的字符串长度|Android开发经验之获取画在画布上的字符串长度 宽度（所占像素宽度）