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


Posted in HTML / CSS onAugust 07, 2021

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两栏布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 HTML / CSS
CSS 实现Chrome标签栏的技巧
纯html+css实现Element loading效果
纯html+css实现奥运五环的示例代码
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 #HTML / CSS
CSS实现两列布局的N种方法
Aug 02 #HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 #HTML / CSS
纯html+css实现打字效果
You might like
模板引擎正则表达式调试小技巧
2011/07/20 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
PHP排序算法的复习和总结
2012/02/15 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
js parsefloat parseint 转换函数
2010/01/21 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
PyCharm配置mongo插件的方法
2018/11/30 Python
django 自定义过滤器的实现
2019/02/26 Python
pip安装python库的方法总结
2019/08/02 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
this关键字的作用
2016/01/30 面试题
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
教师求职信范文分享
2013/12/27 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
小学远程教育工作总结
2015/08/13 职场文书
python基础之错误和异常处理
2021/10/24 Python