一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

css实现两栏布局左侧固定宽右侧自适应多种代码方法

时间:2021-08-04 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下css实现两栏布局左侧固定宽右侧自适应多种代码方法,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

css实现两栏布局,左侧固定宽,右侧自适应的7种方法,代码如下所示:

1、利用 calc 计算宽度的方法 css代码:

.box>div{height: 100%;}
#box1>div{float: left;}
.left1{background: yellow;}
.right1{background: #09c;width:calc(100% - 100px);}

dom结构:

左侧定宽
右侧自适应

2、利用 float 配合 margin 实现 css代码:

.box{overflow: hidden;margin: 10px 0;}
.box>div{height: 100%;}
.left2{float: left;background: yellow;}
.right2{background: #09c;margin-left: 100px;}

dom结构:

左侧定宽
右侧自适应

3、利用 float 配合 overflow 实现 css代码:

.box{overflow: hidden;margin: 10px 0;}
.box>div{height: 100%;}
.left3{float: left;background: yellow;}
.right3{background: #09c;overflow: hidden;}

dom结构:

左侧定宽
右侧自适应

4、利用 position:absolute 配合 margin 实现

css代码:

.box{overflow: hidden;margin: 10px 0;}
.box>div{height: 100%;}
#box4{position: relative;}
.left4{position: absolute;left: 0;top:0;background: yellow;}
.right4{margin-left:100px;background: #09c;}

dom结构:

左侧定宽
右侧自适应

5、利用 position:absolute 实现

css代码:

.box{overflow: hidden;margin: 10px 0;}
.box>div{height: 100%;}
#box5{position: relative;}
.left5{position: absolute;left: 0;top:0;background: yellow;}
.right5{position: absolute;left: 100px;top:0;right: 0;width: 100%;background: #09c;}

dom结构:

左侧定宽
右侧自适应

6、利用 display: flex 实现

css代码:

.box{overflow: hidden;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;margin: 10px 0;}
.box>div{height: 100%;}
#box7{display: table;width: 100%;}
#box7>div{display: table-cell;}
.left7{background: yellow;}
.right7{background: #09c;}

dom结构:

左侧定宽
右侧自适应

热门栏目