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新增颜色表示方式分享
Apr 15 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 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
PHP 的 __FILE__ 常量
2007/01/15 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
js分页工具实例
2015/01/28 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
Python中文件的读取和写入操作
2018/04/27 Python
python实现关键词提取的示例讲解
2018/04/28 Python
对Python 内建函数和保留字详解
2018/10/15 Python
python实现共轭梯度法
2019/07/03 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
python os.rename实例用法详解
2020/12/06 Python
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
物流业务员岗位职责
2014/02/08 职场文书
求职毕业生自荐书
2014/02/08 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
运动会方阵口号
2014/06/07 职场文书
中国梦团日活动总结
2014/07/07 职场文书
迎国庆演讲稿
2014/09/05 职场文书
优秀校长事迹材料
2014/12/24 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书