三栏式布局-左右固定宽度，中间自适应

时间：2023-03-30 23:25:22 CSS

常用列表方式floatabsolutetableflexgridfloatleft

right

center

.container{overflow:auto;}.left{宽度：200px；向左飘浮;背景色：#1ABC9C;}.right{宽度：200px;浮动：对；背景色：#2ECC71;}.center{margin-left:200px;右边距：200px；background-color:#3498DB;}上述实现方式的优点，兼容性简单，缺点：根据渲染规则，从上到下，即先渲染左右，中间部分将最后呈现。优化方法-1使用负边距完成

center

中心

左right.container{overflow:auto;}.left,.right,.center{box-sizing:border-box;}.??left{width:200px;向左飘浮;背景色：#1ABC9C；margin-left:-100%;}.right{width:200px;浮动：对；//向左飘浮;背景色：#2ECC71；margin-left:-200px;}.center{float:left;宽度：100%；左填充：200px；填充右：200px；background-color:#3498DB;}完成了之前的主体内容优先加载问题，但是出现了新的问题，当主体内容过长时，发现背景（边框、背景图等）影响双方。如果只处理后台问题，可以使用下面的方法。center{background-clip:content-box}如果有边框、背景图等，显然上面不能满足优化方法二（圣杯布局）

center

中心

leftright.container{margin:0200px;position:relative;}.left,.right,.center{box-sizing:border-box;}.??center{float:left;宽度：100%；背景色：#3498DB;}.left{位置：相对;左：-200px；向左飘浮;宽度：200px；左边距：-100%；背景色：#1ABC9C；}.right{位置：相对；右：-200px；浮动：对；宽度：200px；左边距：-200px；background-color:#2ECC71;}优化方式三：（双飞翼布局）为中心元素包裹一个容器

center

中心

左右.container{overflow:auto;}.left,.right,.center,.center-warpper{box-sizing:border-box;}.??center-warpper{float:left;width:100%;padding-left:200px;padding-right:200px;}.center{width:100%;overflow:auto;background-color:#3498DB;}.left{width:200px;float:left;background-color:#1ABC9C;margin-left:-100%;}.right{width:200px;float:right;background-color:#2ECC71;margin-left:-200px;}处理方法2和3很相似，只是处理的细节不同。前绝对

center

中心

leftright.container{position:relative;}.left,.right,.center{box-sizing:border-box;}.??center{position:absolute;左：200px；右：200px；背景色：#3498DB;}.left{位置：绝对;左：0；宽度：200px；:#1ABC9C;}.right{位置：绝对;右：0；浮动：对；宽度：200px；背景色：#2ECC71;}tableleft中心

中心

center

right.container{位置：相对；显示：表格；width:100%;}.left,.right,.center{box-sizing:border-box;显示：表格单元格；}.center{背景色：#3498DB；}.left{宽度：200px；背景色：#1ABC9C;}.right{宽度：200px;背景色：#2ECC71;}flexleft

center

中心

center

right.container{位置：相对；显示：弹性；width:100%;}.left,.right,.center{box-sizing:border-box;显示：表格单元格；}.center{背景色：#3498DB；flex:1;}.left{宽度：200px;背景色：#1ABC9C;}.right{宽度：200px;背景色：#2ECC71;}网格left

center

中心

right.container{位置：相对；显示：网格；宽度：100%；grid-template-columns:200pxauto200px;}.left,.right,.center{box-sizing:border-box;}.??center{background-color:#3498DB;}.left{background-color:#1ABC9C;}.right{background-color:#2ECC71;}以上是几种实现方式，细心同学们应该能看到float和absoulut这两个左右两列是不会随着中间内容区域的高度变化的。如果你想创建一个中间自适应的三列布局，并且三列高度相同，选择table、flex和Grid；具体兼容性可以在兼容性检查中找到。如果有更好的方法，可以在评论区给出；一起讨论学习

上一篇：CSS选择器_5

下一篇：Scrollbar(如何修改滚动条的颜色)

三栏式布局-左右固定宽度，中间自适应相关文章