看完这篇还不知道css固定和自适应可以小和尚要摆地摊了

前言

开篇

左右侧采用浮动中间采用margin-left 和 margin-right 方法。

中篇

利用绝对定位中间同样采用margin-left margin-right方法

续篇

负的margin

终篇

三列布局中间固定，其他两列自适应

前言

接上一篇的小徒弟继续说吧

上一篇小徒弟进入山门之后，又开始一段新的历练。

师傅（路人甲）+徒弟（路人乙）

路人甲：徒弟，你已经成长了，要学会自己去独立了。

路人乙:狮虎，有什么新的指示吗

路人甲:你学习了那么久了，知道如何实现两列固定，中间自适应的布局吗，实现不了就去摆地摊吧

开篇

小徒弟陷入了沉思，开始思考了一会

路人乙:我想想

第一种方式

左右侧采用浮动中间采用margin-left 和 margin-right 方法。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>两行固定中间自适应</title>
</head>
<style></style><body><div style="width:100%; margin:0 auto;"><div style="width:200px; float:right; background-color:#960">这是右侧的内容 路人甲</div><div style="width:150px; float:left; background:#6FF">这是左侧的内容 路人乙</div><div style="margin-left:150px;margin-right:200px; background-color:#9F3">中间内容，自适应宽度</div></div>
</body></html>

中篇

想了一会之后

路人乙:我想不出了狮虎狮虎可以提示一下吗

路人甲沉默了一会，还是按照你原来的想法做一下修改就好了

第二种方式

第二种：利用绝对定位中间同样采用margin-left margin-right方法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>两行固定中间自适应</title>
</head>
<style>.left,.right {position: absolute;top: 0;width: 220px;height: 100%;}.left {left: 0;background-color: blue;}.right {right: 0;background-color: red;}.main {margin: 0 230px;height: 100%;}
</style><body><div class="left">路人甲</div><div class="right">歌谣</div><div class="main">路人乙</div>
</body></html>

续篇

路人乙想了一会

第三种方式负的margin

路人乙:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>两行固定中间自适应</title>
</head>
<style>#main {float: left;width: 100%;}#mainContainer {margin: 0 230px;height: 200px;background: green;}#left {float: left;margin-left: -100%;width: 230px;background: orange;height: 200px;}#right {float: left;margin-left: -230px;width: 230px;background: orange;height: 200px;}
</style><body><div id="main"><div id="mainContainer">main content</div></div><div id="left">left content</div><div id="right">right</div>
</body></html>

终篇

晚上小徒弟回去休息休息，又来了新的思路

可不可以实现三列布局中间固定，其他两列自适应呢

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}#left {height: 300px;background: orange;float: left;width: 50%;position: relative;margin-left: -150px;}#right {height: 300px;background: orange;float: right;width: 50%;margin-left: -150px;}#center {width: 300px;height: 300px;background: green;float: left;position: relative;}</style>
</head><body><div id="left">我是路人甲</div><div id="center">我是歌谣</div><div id="right">我是路人乙</div></body></html>