flex 固定一列_css实现两列固定与一列自适应的几种方法
本文介绍了css实现两列固定与一列自适应的几种方法,分享给大家,具体如下:
1.flex布局
Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。我们说 flexbox 是一种一维的布局,是因为一个 flexbox 一次只能处理一个维度上的元素布局,一行或者一列。这里我们利用flex布局来实现两列固定一列自适应
Document
#main{
display: flex;/*设为伸缩容器*/
}
#left{
width:200px;/*左侧固定宽度*/
height:400px;
background:aqua;
}
#center{
flex-grow:1; /*填满剩余空间*/
height:400px;
background:green;}
#right{
width:200px;/*固定右侧宽度*/
height:400px;
background:blue;
}
2.使用浮动方法
对左右两部分分别使用float:left和float:right,float使左右两个元素脱离文档流,中间元素正常在正常文档流中。对中间文档流使用margin指定左右外边距进行定位。
Document
*{margin: 0;padding: 0;}
#main{
width: 100%;height: 400px;
}
#left{
width:200px;/*左侧固定宽度*/
height:400px;
float: left; /*设置容器左浮动*/
background:aqua;
}
#center{
width: 100%;
height:400px;
margin: 0 200px;/*设置容器左右外边距*/
background:green;}
#right{
width:200px;/*固定右侧宽度*/
height:400px;
float: right;/*设置容器右浮动*/
background:blue;
}
3.使用浮动加calc函数
对三部分使用float:left,然后左右两边固定宽度,中间使用calc函数计算宽度。
Document
*{margin: 0;padding: 0;}
#main{
width: 100%;height: 400px;
}
#left{
width:200px;/*左侧固定宽度*/
height:400px;
float: left; /*设置容器左浮动*/
background:aqua;
}
#center{
width: calc(100% - 400px);/*设置中间宽度为父容器宽度减去400px*/
height:400px;
float: left;/*设置容器左浮动*/
background:green;}
#right{
width:200px;/*固定右侧宽度*/
height:400px;
float:left;/*设置容器左浮动*/
background:blue;
}
4.使用绝对定位
用绝对定位把左右两部分固定在两端,对中间文档流使用margin指定左右外边距进行定位。
Document
*{margin: 0;padding: 0;}
#main{
width: 100%;
height: 400px;
position: relative;/*父容器使用相对定位*/
}
#left{
width:200px;/*左侧固定宽度*/
height:400px;
position: absolute;/*左侧使用固定定位*/
left: 0;/*定位在容器最左边*/
top: 0;
background:aqua;
}
#center{
width:100%;
height:400px;
margin: 0 200px;/*设置中间容器左右外边距*/
background:green;}
#right{
width:200px;/*固定右侧宽度*/
height:400px;
position: absolute;/*右侧使用固定定位*/
right: 0;/*定位在容器最右边*/
top: 0;
background:blue;
}
效果图如下:
到此这篇关于css实现两列固定与一列自适应的几种方法的文章就介绍到这了,更多相关css 两列固定 一列自适应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
flex 固定一列_css实现两列固定与一列自适应的几种方法相关推荐
- python两个元组相加_Python两个字典键同值相加的几种方法
Python中,如何合并两个键相同,值为元祖类型的字典? dicxs={"李明":("男",19), "杨柳":("女" ...
- java计算两个日期之间相差的天数的四种方法
计算两个日期之间相差的天数的四种方法 第一种:时间戳的方式,计算两个日期的时间戳的差,再除当天的毫秒数即可得到相差的天数. public static void main(String[] args) ...
- html固定右侧显示,html+css布局之--左边固定宽,右侧自适应(4种方法)
今天,在网上看到一个题目,关于布局的,左边固定宽,右侧自适应(不少于3种方法),看到问题手痒自己试了一下,想了四种方法,码一下. 有好的方法,可以告诉我! html: 第一种:定位+margin-le ...
- Python两个字典键同值相加的几种方法
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/Jerry_1126/article/d ...
- css a 标签上下间距_CSS实用技能:去除inline-block元素间间距的7种方法
现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: 两个相邻的radio之间总是多那么一点点的间距,不是margin也不是paddin ...
- 两台Linux系统之间传输文件的几种方法
scp传输 当两台LINUX主机之间要互传文件时可使用SCP命令来实现 scp传输速度较慢,但使用ssh通道保证了传输的安全性 复制文件 将本地文件拷贝到远程 scp 文件名 –用户名@计算机IP或者 ...
- python偶数分解成两个素数之和_偶数 2021218918 ,有多少种方法分解成两个素数之和?...
对于上面问题2N=2021218918,满足"p+q=2N"的素数对(p,q)的个数真值为3289208个.下面对这个值进行理论探求分析,请大家不吝赐教! 下面先来进行基于小素数因 ...
- 实现pc和手机两终端都可以在线播放视频的一种方法
我是晓文,我来写个博客.目前很多用户的网站,或企业网站要求实现手机在线播放视频,来宣传自己的企业,那么问题来了,如何最简单的快速的实现这样的要求呢?我最近试用了一下酷播云端播放器产品,觉得他们做得还不 ...
- 两台或多台PC共享上网实现的方法
http://www.cnitsc.com/adsl/share/jiben/share.htm http://www.tianya.cn/New/PublicForum/Content.asp?fl ...
最新文章
- JS数组遍历的几种方式
- 【干货】引爆公式,让你的APP成为下一个“爆款”!
- mysql班次和排班怎么设计表_java 员工轮询值班排班 开发设计(mysql+redis)
- Android开发之跨进程通信-广播跨进程实现方法(附源码)
- jzoj3189-解密【字符串hash】
- C++工作笔记-对纯虚函数的进一步理解(作用)
- Holding Bin-Laden Captive! (HDU-1085)
- django-静态文件设置
- oracle学习资料
- 前端面试官经验总结 | 前端面试小技巧
- CSS Sprite、CSS雪碧图应用实例
- 如何设置excel表格表头冻结_Excel如何固定表头,Excel冻结首行首列或指定行
- 百科知识 epub文件如何打开
- Doxbox更改窗口大小
- python ljust()、center() 、rjust() 字符串填充左中右对齐
- java int格式转换文本_java 文件导出Excel 文本形式转数字格式解决,字段是int导出需求是数字解决方案...
- 标题怎样选择适合自己的导图结构
- 杂记-Macbook Pro M1芯片能玩深度学习吗?
- static变量的生存期问题
- cad考试题库绘图题答案_最新CAD考试题库及答案-cad考试题库绘图题答案
热门文章
- MySQL 命令和内置函数
- 第 1-2 课:你不知道的基础数据类型和包装类 + 面试题
- 一文带你看完ZooKeeper!
- 我被面试官给虐懵了,竟然是因为我不懂Spring中的@Configuration
- 转:Oracle物理文件
- Linux新建用户可以在shell中切换到该用户也能登录到图形桌面
- Linux新安装后设置root密码
- excel处置4000行数据卡_懂Excel就能轻松入门Python数据分析包pandas(三):制作成绩条...
- rust石头墙几个c4_石头在景观中的运用
- oracle删除唯一索引sql语句_高级SQL之在选择语句中使用更新和删除