两端固定中间自适应布局实现
首先完成中间自适应部分
这个简单，设置个左右外边距加上颜色就可以了。
.main{
float:left;
width:100%;
}
.main_body{
margin:0 210px;
/*上外边距和下外边距是 0px右外边距和左外边距是 5px*/
background:#888;
height:200px;
}Main
Left
Right
结果
文章图片
image.png 实现两侧固定部分 为了让实现div元素处于一行，首先左侧必须float。
好，加上
.left{
float:left;
width:200px;
height:200px;
background:#F60;
}
结果如图
哎，不对劲啊
文章图片
image.png 怎么left跑下面去了。因为main元素是float，还是100%。所有后面的自然只有往下排放了。
那再加一句
.left{
margin-left:-100%;
}
结果如图。为啥 margin-left:-100%就能让他两排一排呢？
文章图片
image.png 改成-10%试试。
文章图片
image.png
marigin-left使得元素自身向左移动，上述-100%折合多少px？应该是整个浏览器那么宽，下面这行不够移了，移到上一行去了。
再看看-80%
文章图片
image.png
事实上，移到-100%，刚好能移到到最左边。
好现在把右边的也加上
.right{
float:left;
width:200px;
height:200px;
background:#F60;
}
结果如下
文章图片
image.png 如何让右侧的也移动到第一行呢？margin-left值设置多少？如果设置-50%，就过头了。
文章图片
image.png
right的宽度是-200，那就设置-200px。
刚好
文章图片
image.png 总结代码
body{
margin:0;
padding:0;
min-width:600px;
}
.main{
float:left;
width:100%;
}
.main_body{
margin:0 210px;
background:#888;
height:200px;
}
.left,.right{
float:left;
width:200px;
height:200px;
background:#F60;
}
.left{
margin-left:-100%;
}
.right{
margin-left:-200px;
}Main
Left
Right
总结 关键几点，
自适应的部分不要设置float，左侧和右侧都要设置float。
理解margin-left的作用，向左移动，移动到左侧尽头就向上一行左侧移动，这个设定有点trick。
负margin绝壁是个trick。虽然有些人不这么认为
文章图片
image.png 思考：为啥main必须是float~
【两端固定中间自适应布局实现】以上纯属个人试验，正确性不做保证。。
推荐阅读
- 记录iOS生成分享图片的一些问题，根据UIView生成固定尺寸的分享图片
- 1.56米的蔡依林从刚出道的116斤到现在保持现有的80斤，中间经历的心酸真心让人佩服！
- Android实现主页底部菜单中间tab图案凸起
- Java消息中间件概念基础
- 它怎会来到此地这些斜眼的人中间（|它怎会来到此地这些斜眼的人中间？| 格雷夫斯《残币》）
- LeetCode|LeetCode 876. 链表的中间结点
- 高效能慢生活18天
- MetaQ原理简介（一）
- 云栖号技术分享|一年增加 1.2w 星，Dapr 能否引领云原生中间件的未来（）
- js生成固定时间间隔的时间值-每秒递增-分钟递增-分小时递增