css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021-11-23 04:07
1171 查看
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结构:
<div class="box" id="box1"> <div class="left1">左侧定宽</div> <div class="right1">右侧自适应</div> </div>
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结构:
<div class="box" id="box2"> <div class="left2">左侧定宽</div> <div class="right2">右侧自适应</div> </div>
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结构:
<div class="box" id="box3"> <div class="left3">左侧定宽</div> <div class="right3">右侧自适应</div> </div>
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结构:
<div class="box" id="box4"> <div class="left4">左侧定宽</div> <div class="right4">右侧自适应</div> </div>
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结构:
<div class="box" id="box5"> <div class="left5">左侧定宽</div> <div class="right5">右侧自适应</div> </div>
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结构:
<div class="box" id="box6"> <div class="left6">左侧定宽</div> <div class="right6">右侧自适应</div> </div>
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结构:
<div class="box" id="box7"> <div class="left7">左侧定宽</div> <div class="right7">右侧自适应</div> </div>
到此这篇关于css实现两栏布局,左侧固定宽,右侧自适应的7中方法的文章就介绍到这了,更多相关css两栏布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- css实现两栏布局,左侧固定宽,右侧自适应的七种方法
- 七种实现左侧固定,右侧自适应两栏布局的方法
- CSS实现左侧固定宽度右侧自适应的固比布局
- CSS-左侧固定宽度,右侧自适应宽度的两列布局实现方法总结
- 七种实现左侧固定,右侧自适应的两栏布局方法
- CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)
- css实现左右布局,左侧div固定不变,右侧div宽度自适应
- 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化
- 两列布局——左侧宽度固定,右侧宽度自适应的两种方法
- 两列布局——左侧宽度固定,右侧宽度自适应的两种方法
- 两列布局——左侧宽度固定,右侧宽度自适应的两种方法
- 关于利用css 实现右侧固定 左侧自适应布局的解决方案
- 关于css布局中左侧固定右侧自适应的几种方法
- CSS网页布局---左侧栏固定,右侧栏自适应的骨灰级讲解
- 两列布局——左侧宽度固定,右侧宽度自适应的两种方法
- css布局:左边固定宽度,右边自适应宽度或右侧固定,左侧自适应三种方法
- HTML实现2列布局(左侧宽度固定,右侧自适应)的方法
- 使用css3的flex盒模型来实现两栏布局(左侧固定宽度,右侧自适应宽度)
- 左侧固定右侧自适应的布局的方法
- css布局实现:左侧固定,右侧占满剩余的全部