CSS三列布局之左右宽度固定,中间元素自适应问题_html/css_WEB-ITnose
程序员文章站
2022-04-15 10:26:39
...
最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈。
首先我想到的是float——浮动布局
使用浮动,先渲染左右两个元素,分别让他们左右浮动,然后再渲染中间元素,设置它的margin左右边距分别为左右两个元素的宽度。例如以下代码就可以实现我们想要的三列效果啦。
Document 左侧的内容 固定宽度右侧的内容 固定宽度中间内容,自适应宽度
其次我想到了position——定位
使用定位方式,不需要先渲染中间元素,只要把左右两个元素分别使用定位,left:0;right:0;中间元素设置margin左右边距为左右两个元素的宽度即可。
Document 左边中间右边
第三、使用双飞翼布局
使用双飞翼布局与其他方式不同,它最先渲染的是中间元素,然后才渲染两边元素(注意,这一点与float布局方式正好相反哟),先将三个元素都设置为向左浮动,然后使用负边距将左右两个元素覆盖到中间元素的左右两边,形成羽翼。
Document middleleftright
双飞翼布局的最大优点是它的兼容性——可以兼容到IE6.
最后我还想说说CSS3的flex布局方法
该方式的思想是设置一个弹性容器包裹三个元素,并将这个容器设置为水平排列(flex-flow:row),左右两边元素设置固定宽度,中间元素设置为flex:1;
Document 左边中间右边
但不得不说的是flex布局的兼容性还不够完善,所以个人不推荐使用这种方式布局。
嘿嘿,以上就是我能想到的实现左右固定,中间自适应的三列布局的几种方式啦啦啦
上一篇: Reactjs的生命周期是什么?reactjs生命周期的详细介绍
下一篇: html怎么实现进度条
推荐阅读
-
CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)_html/css_WEB-ITnose
-
左右两栏宽度自适应,中间一栏宽度固定_html/css_WEB-ITnose
-
CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)_html/css_WEB-ITnose
-
DIV_CSS布局问题:3个水平对齐布局的DIV,左右固定宽,中间宽度自动填充_html/css_WEB-ITnose
-
DIV_CSS布局问题:3个水平对齐布局的DIV,左右固定宽,中间宽度自动填充_html/css_WEB-ITnose
-
css实现的左右两栏宽度自适应中间一栏宽度固定_html/css_WEB-ITnose
-
CSS三列布局之左右宽度固定,中间元素自适应问题 - pwy
-
css实现的左右两栏宽度自适应中间一栏宽度固定_html/css_WEB-ITnose
-
CSS三列布局之左右宽度固定,中间元素自适应问题 - pwy
-
CSS三列布局之左右宽度固定,中间元素自适应问题_html/css_WEB-ITnose