今天通过7种方法给大家介绍css实现两栏布局，左侧固定宽，右侧自适应效果，每种方法通过实例代码给大家介绍的非常详细，需要的朋友参考下吧
css实现两栏布局，左侧固定宽，右侧自适应的7种方法，代码如下所示：
1、利用 calc 计算宽度的方法 css代码:
.box>div{height: 100%;} #box1>div{float: left;} .left1{width: 100px;background: yellow;} .right1{background: #09c;width:calc(100% - 100px);}dom结构:
左侧定宽右侧自适应
2、利用 float 配合 margin 实现 css代码:
.box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} .left2{float: left;background: yellow;width: 100px;} .right2{background: #09c;margin-left: 100px;}dom结构:
左侧定宽右侧自适应
3、利用 float 配合 overflow 实现 css代码:
.box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} .left3{float: left;background: yellow;width: 100px;} .right3{background: #09c;overflow: hidden;}dom结构:
左侧定宽右侧自适应
4、利用 position:absolute 配合 margin 实现
css代码:
.box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #box4{position: relative;} .left4{position: absolute;left: 0;top:0;width: 100px;background: yellow;} .right4{margin-left:100px;background: #09c;}dom结构:
左侧定宽右侧自适应
5、利用 position:absolute 实现
css代码:
.box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #box5{position: relative;} .left5{position: absolute;left: 0;top:0;width: 100px;background: yellow;} .right5{position: absolute;left: 100px;top:0;right: 0;width: 100%;background: #09c;}dom结构：
左侧定宽右侧自适应
6、利用 display: flex 实现
css代码：
.box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #box6{display: flex;display: -webkit-flex;} .left6{flex:0 1 100px;background: yellow;} .right6{flex:1;background: #09c;}dom结构：
左侧定宽右侧自适应
7、利用 display: table 实现 css代码：
.box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #box7{display: table;width: 100%;} #box7>div{display: table-cell;} .left7{width: 100px;background: yellow;} .right7{background: #09c;}dom结构：
左侧定宽右侧自适应
以上就是css实现两栏布局，左侧固定宽，右侧自适应的多种方法的详细内容，更多请关注0133技术站其它相关文章！
