html如何左侧固定div,详解左右宽度固定中间自适应html布局解决方案

原标题：详解左右宽度固定中间自适应html布局解决方案

本文介绍了详解左右宽度固定中间自适应html布局解决方案，分享给大家，具体如下：

a.使用浮动布局

html结构如下

left

right

center

//此处注意要先渲染左、右浮动的元素才到中间的元素。元素浮动后剩余兄弟块级元素会占满父元素的宽度

.box{

height:200px;

}

.left{

float:left;

width:300px;

}

.right{

float:right;

width:300px;

}

b.使用固定定位

html结构如下

left

right

center

//和浮动布局同理，先渲染左右元素，使其定位在父元素的左右两端，剩余的中间元素占满父元素剩余宽度。

.box{

position: relative;

}

.left{

position: absolute;

width: 100px;

left: 0;

}

.right{

width:100px;

position: absolute;

right: 0;

}

.center{

margin: 0 100px;

background: red;

}

c.表格布局

将父元素display:table，子元素display:table-cell，会将它变为行内块。

这种布局方式的优点是兼容性好。

left

center

right

.box{

display: table;

width: 100%;

}

.left{

display: table-cell;

width: 100px;

left: 0;

}

.right{

width:100px;

display: table-cell;

}

.center{

width: 100%;

background: red;

}

d.弹性布局

父元素display：flex子元素会全部并列在一排。

子元素中flex:n的宽度会将父元素的宽度/n

如flex:1，宽度就等于父元素高度。

弹性布局的缺点是兼容性不高，目前IE浏览器无法使用弹性布局

left

center

right

.box{

display: flex;

width: 100%;

}

.left{

width: 100px;

left: 0;

}

.right{

width:100px;

}

.center{

flex:1;

}

e.网格布局

父元素display:grid;

grid-templatecolumns:100px auto 100px;

依次为第一个子元素宽100px 第二个自适应第三个100px;

网格布局的优点是极为简便，直接通过父元素样式决定，缺点是兼容性不高。

left

center

right

.box{

display: grid;

grid-template-columns: 100px auto 100px;

width: 100%;

}

建站免费素材下载：sucaiq.com

如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对素材圈的支持！若你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！返回搜狐，查看更多

责任编辑：

html如何左侧固定div,详解左右宽度固定中间自适应html布局解决方案相关推荐

CentOS 8虚拟机下设置固定IP详解
面临的问题:每次电脑重启,打开虚机IP地址都会发生变化搜索了下面的文章, 我的环境: 虚机镜像:CentOS 8, 网络链接方式:NAT模式虚拟机:VMware Workstation 16 Pr ...
定位的坐标原点HTML,css固定定位_CSS绝对定位固定定位详解
摘要腾兴网为您分享:CSS绝对定位固定定位详解,智学网,鱼乐贝贝,优酷,瑞易生活等软件知识,以及安卓微信多开,特效视频,微贷网app,勿忘我3dm,有为学堂,火力牛,手机知网,移动小秘书,快学堂,p ...
Android Studio 安装详解及安装过程中出现的问题解决方案
Android Studio 安装详解及安装过程中出现的问题解决方案一,Android Studio安装包下载, 首先到官网下载,就是去Android Studio中文社区官网下载你的平台需要的安装 ...
postionfixed固定_详解如何解决position:fixed固定定位偏移问题
问题 css固定定位position:fixed很容易使用,就是相对浏览器的viewport进行定位,top:0;left:0就是在左上角. .container{ width: 100px; hei ...
c fread 快读详解_奔驰ACC（自适应巡航系统）详解
什么是ACC自适应巡航?ACC自适应巡航( Adaptive Cruise Control ),又可称为智能巡航控制系统,简称ACC系统,它是在传统巡航控制基础上发展起来的新一代汽车驾驶员辅助驾驶系统 ...
CSS实现背景图片详解全屏铺满自适应的方式
问题: CSS实现背景图片全屏铺满自适应的方式解决: (1)background-image:可添加多张背景图片.参数:url() || none(默认)background-image: url( ...
sql查询出的字段切割_SPL 简化 SQL 案例详解：多层固定分组
在数据库应用开发中,我们经常需要面对各种复杂的SQL计算,多层固定分组就是其中一种.实现该算法的思路是用left join语句将源数据按照固定的依据对齐,但由于该算法往往涉及分组汇总.行间计算.填补缺 ...
镗孔指令g76格式_钻孔、镗孔、攻丝，11个固定循环详解！
FANUC系统共有11种孔加工固定循环指令,下面对其中的部分指令加以介绍. 1)钻孔循环指令G81 G81钻孔加工循环指令格式为: G81 G△△ X__ Y__ Z__ R__ F__ X,Y为孔的 ...
flex 底部固定_详解八种方法实现CSS页面底部固定
当我们在写页面时经常会遇到页面内容少的时候,footer会戳在页面中间或什么?反正就是不在最底部显示,反正就是很难看,下面要讲的布局就是解决如何使元素粘住浏览器底部, 方法一:footer高度固定+绝 ...

html如何左侧固定div,详解左右宽度固定中间自适应html布局解决方案

html如何左侧固定div,详解左右宽度固定中间自适应html布局解决方案相关推荐

最新文章

热门文章