CSS三列布局之左右宽度固定 中间元素自适应问题【HTML】

web前端|html教程

CSS三列布局之左右宽度固定，中间元素自适应问题

web前端-html教程

最近学到了几种关于左右固定宽度，中间自适应的三列布局的方法，整理了一下，在这里跟大家一起分享分享，其中有什么不足的还望各位给指导指导哈。

flash banner源码,ubuntu 社区工作,爬虫大神技术,php target=,seo知识教程lzw

首先我想到的是float——浮动布局

使用浮动，先渲染左右两个元素，分别让他们左右浮动，然后再渲染中间元素，设置它的margin左右边距分别为左右两个元素的宽度。例如以下代码就可以实现我们想要的三列效果啦。

免费友链交换平台源码,ubuntu中下载软件,爬虫抗生素,php底下,SEO论坛排名lzw

左侧的内容 固定宽度

右侧的内容 固定宽度

中间内容，自适应宽度

安卓来电通源码,vscode中numpy,ubuntu拒绝udp,编译tomcat支持,sqlite 删掉主键,年月 时间插件,前端框架写的模板,星球爬虫源,-> php,首页 标题 seo,h5商城网站源码下载,易语言 获取网页元素,下载cps模板,html静态页面七夕,c 简单管理系统源代码下载,就上任务网php完整程序lzw

其次我想到了position——定位

使用定位方式，不需要先渲染中间元素，只要把左右两个元素分别使用定位，left:0;right:0;中间元素设置margin左右边距为左右两个元素的宽度即可。

.left{width:200px;height:500px;position: absolute;top:0;left:0;background:blue;}.center{ margin-left: 200px; margin-right: 300px; height:500px; background-color: green;}.right{width:300px;height:500px;position: absolute;;top:0;right:0;background: blue;}

左边

中间

右边

第C、使用双飞翼布局

使用双飞翼布局与其他方式不同，它最先渲染的是中间元素，然后才渲染两边元素（注意，这一点与float布局方式正好相反哟），先将三个元素都设置为向左浮动，然后使用负边距将左右两个元素覆盖到中间元素的左右两边，形成羽翼。

.middle{ float: left; width: 100%; height: 50px; background-color: #fff9ca;}.middle-wrap{ margin: 0 200px 0 150px;}.left{ float: left; width: 150px; height: 50px; background-color: red; margin-left: -100%; /*负边距的作用就是让左边div盖在中间div上面*/}.right{ float: left; width: 200px; height: 50px; background-color: yellow; margin-left: -200px; /*让右边的div覆盖在中间的div右边*/}

middle

left

right

双飞翼布局的最大优点是它的兼容性——可以兼容到IE6.

最后我还想说说CSS3的flex布局方法

该方式的思想是设置一个弹性容器包裹三个元素，并将这个容器设置为水平排列（flex-flow:row）,左右两边元素设置固定宽度，中间元素设置为flex:1;

.flex { display: flex; flex-flow: row;}.left{ width: 200px; height: 50px; background-color: red;}.center{ flex: 1;height: 50px; background-color: #fff9ca;}.right { width: 300px; height: 50px; background-color: yellow;}

左边

中间

右边

但不得不说的是flex布局的兼容性还不够完善，所以个人不推荐使用这种方式布局。

嘿嘿，以上就是我能想到的实现左右固定，中间自适应的三列布局的几种方式啦啦啦