本文主要是介绍CSS两侧固定，中间自适应，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
这个效果，其实和一侧固定，一侧自适应是一样的原理
以下代码分别用到了 position、float、display: flex / grid、calc
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.box {border: 1px solid #000;}.box1 {background-color: #f00;}.box2 {background-color: #aee;}.box3 {background-color: #ccc;}/** 第一种 定位 */.absolute {position: relative;}.absolute .box1 {width: 200px;height: 300px;position: absolute;left: 0;top: 0;}.absolute .box2 {height: 200px;margin-left: 200px;margin-right: 200px;}.absolute .box3 {width: 200px;height: 300px;position: absolute;right: 0;top: 0;}/** 第二种 实现中间的宽度是随着文字的增加而变宽 而不是占满全部剩余空间 */.float .box1 {width: 200px;height: 300px;float: left;}.float .box2 {height: 100px;/* 加这个是为了防止文字过多将左右盒子顶下来 */max-width: calc(100% - 400px);display: inline-block;}.float .box3 {width: 200px;height: 300px;float: right;}/* 第三种 使用左右浮动 前两个必须是浮动的 第三个自适应 */.float1 .box1 {width: 200px;height: 300px;float: left;}.float1 .box2 {width: 200px;height: 300px;float: right;}.float1 .box3 {height: 100px;}/** 第四种 flex */.calc-flex {display: flex;}.calc-flex .box1 {width: 200px;height: 200px;}.calc-flex .box2 {width: calc(100% - 400px);}.calc-flex .box3 {width: 200px;height: 200px;}/** 第五种 grid */.grid {display: grid;grid-template-columns: 200px calc(100% - 400px) 200px;grid-template-rows: 300px;}</style>
</head>
<body>
<div class="box grid"><div class="box1"></div><div class="box2">222222sssssssssssssssssssssss</div><div class="box3"></div>
</div>
</body>
</html>将对应类名，依次加到box上就能看到效果
这篇关于CSS两侧固定，中间自适应的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
