css实现两栏布局,左侧固定宽,右侧自适应的多种方法
发布时间:2021-08-04 14:32:21 作者:小萌在线敲打 我要评论
今天通过7种方法给大家介绍css实现两栏布局,左侧固定宽,右侧自适应效果,每种方法通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
css实现两栏布局,左侧固定宽,右侧自适应的7种方法,代码如下所示:
1、利用 calc 计算宽度的方法 css代码:
1 2 3 4 | .box>div{ height : 100% ;} #box 1 >div{ float : left ;} .left 1 { width : 100px ; background : yellow;} .right 1 { background : #09c ; width :calc( 100% - 100px );} |
dom结构:
1 2 3 4 | <div class= "box" id= "box1" > <div class= "left1" >左侧定宽</div> <div class= "right1" >右侧自适应</div> </div> |
2、利用 float 配合 margin 实现 css代码:
1 2 3 4 | .box{ overflow : hidden ; height : 100px ; margin : 10px 0 ;} .box>div{ height : 100% ;} .left 2 { float : left ; background : yellow; width : 100px ;} .right 2 { background : #09c ; margin-left : 100px ;} |
dom结构:
1 2 3 4 | <div class= "box" id= "box2" > <div class= "left2" >左侧定宽</div> <div class= "right2" >右侧自适应</div> </div> |
3、利用 float 配合 overflow 实现 css代码:
1 2 3 4 | .box{ overflow : hidden ; height : 100px ; margin : 10px 0 ;} .box>div{ height : 100% ;} .left 3 { float : left ; background : yellow; width : 100px ;} .right 3 { background : #09c ; overflow : hidden ;} |
dom结构:
1 2 3 4 | <div class= "box" id= "box3" > <div class= "left3" >左侧定宽</div> <div class= "right3" >右侧自适应</div> </div> |
4、利用 position:absolute 配合 margin 实现
css代码:
1 2 3 4 5 | .box{ overflow : hidden ; height : 100px ; margin : 10px 0 ;} .box>div{ height : 100% ;} #box 4 { position : relative ;} .left 4 { position : absolute ; left : 0 ; top : 0 ; width : 100px ; background : yellow;} .right 4 { margin-left : 100px ; background : #09c ;} |
dom结构:
1 2 3 4 | <div class= "box" id= "box4" > <div class= "left4" >左侧定宽</div> <div class= "right4" >右侧自适应</div> </div> |
5、利用 position:absolute 实现
css代码:
1 2 3 4 5 | .box{ overflow : hidden ; height : 100px ; margin : 10px 0 ;} .box>div{ height : 100% ;} #box 5 { position : relative ;} .left 5 { position : absolute ; left : 0 ; top : 0 ; width : 100px ; background : yellow;} .right 5 { position : absolute ; left : 100px ; top : 0 ; right : 0 ; width : 100% ; background : #09c ;} |
dom结构:
1 2 3 4 | <div class= "box" id= "box5" > <div class= "left5" >左侧定宽</div> <div class= "right5" >右侧自适应</div> </div> |
6、利用 display: flex 实现
css代码:
1 2 3 4 5 | .box{ overflow : hidden ; height : 100px ; margin : 10px 0 ;} .box>div{ height : 100% ;} #box 6 { display : flex; display : -webkit-flex;} .left 6 {flex: 0 1 100px ; background : yellow;} .right 6 {flex: 1 ; background : #09c ;} |
dom结构:
1 2 3 4 | <div class= "box" id= "box6" > <div class= "left6" >左侧定宽</div> <div class= "right6" >右侧自适应</div> </div> |
7、利用 display: table 实现 css代码:
1 2 3 4 5 6 | .box{ overflow : hidden ; height : 100px ; margin : 10px 0 ;} .box>div{ height : 100% ;} #box 7 { display : table; width : 100% ;} #box 7 >div{ display : table-cell ;} .left 7 { width : 100px ; background : yellow;} .right 7 { background : #09c ;} |
dom结构:
1 2 3 4 | <div class= "box" id= "box7" > <div class= "left7" >左侧定宽</div> <div class= "right7" >右侧自适应</div> </div> |
到此这篇关于css实现两栏布局,左侧固定宽,右侧自适应的7中方法的文章就介绍到这了,更多相关css两栏布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章
css display table 自适应高度、宽度问题的解决
这篇文章主要介绍了css display table 自适应高度、宽度问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着2021-05-07- 这篇文章主要介绍了详解CSS多种三列自适应布局实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习2021-02-24
- 这篇文章主要介绍了CSS实现背景图片屏幕自适应的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2020-12-07
- css3实现自适应浏览器图片布局特效是一款自适应浏览器屏幕的水平列表div容器,好友头像列表水平布局特效。2020-11-23
- 这篇文章主要介绍了CSS实现表格首行首列固定和自适应窗口的实例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-11-11
- 这篇文章主要介绍了css实现六种自适应两栏布局方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习2020-10-28
- 这篇文章主要介绍了CSS将img图片填满父容器div并自适应容器大小,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编2020-10-23
最新评论