三列布局（左右固定，中间自适应）四种方式 HTML

效果图
文章图片

一、flex弹性布局

.container{ display: flex; } .left{ /* flex:0 0 100px; 不扩展、不收缩、固定宽度100px*/ height: 400px; background: rgb(148, 145, 132); flex:0 0 100px; } .right{ height: 400px; background: rgb(148, 145, 132); flex:0 0 100px; } .middle{ /* flex:auto; 等同于 flex:1 1 auto */ background: rgb(233, 230, 232); flex: auto; }

二、float浮动布局 【三列布局（左右固定，中间自适应）四种方式】浮动布局有两个重要的地方：

HTML结构中的顺序是左侧、右侧、中间。（左中由顺序下，右侧的将会被挤到下一行）
CSS样式中middle模块，要设置左右margin宽度为左右固定列宽度，否则中间模块会占据整个父容器覆盖左右固定列

.container{ height: 400px; } .left{ /*float: left; 左浮动 */ background: yellow; width: 100px; height:inherit; float: left; } .right{ /* float: right; 右浮动 */ background: yellow; width: 100px; height:inherit; float: right; } .middle{ /* 这里一定要设置左右边距 */ height: inherit; background: yellowgreen; margin-left: 100px; margin-right: 100px; }

这里一定要注意顺序是左、右、中

三、position定位布局

.container{ /* 包裹三列的这个大容器要设置相对定位 */ position: relative; height: 400px; } .left{ width: 100px; height: inherit; background: rgb(83, 206, 34); position: absolute; } /* 中间绝对定位，并且留出左右固定列的宽度，否则两侧的内容会被覆盖 */ .middle{ height: inherit; background: goldenrod; position: absolute; left:100px ; right: 100px; } .right{ /* 右侧绝对定位要指定距父容器右侧的宽度为0，实现靠右 */ width: 100px; height: inherit; background: rgb(83, 206, 34); position: absolute; right: 0; }

左侧中间右侧

四、grid网格布局

/* grid-template-columns:200px auto 200px; 定义网格容器的为3列，分别是200px、自动、200px */ .container{ height:400px; display: grid; grid-template-columns:200px auto 200px; } .left{ background: rgb(248, 166, 42); } .right{ background: rgb(248, 166, 42); } .middle{ background: rgb(236, 229, 127); }