首先这个这么扯淡又装逼的名字不知道是谁起的，大意就是说：中间的内容随着宽度的不同进行宽度自适应操作，而两边的内容固定宽度
来，上个代码演示一下：
然后出来的效果是这样嘚：
这个大块头的中间部分确实可以随着浏览窗口宽度的改变而改变：
但是卧槽，很猎奇啊有木有！中间的主体叉在两侧内嫆上方是什么鬼？我们预期的是让它们在一个水平线上将代码改为如下这样：
思路如下：.让左边的盒子上去，需要设置其左边距为負的中间盒子的宽度也就是.left {margin-left:-100%;}。这样左盒子才可以往最左边移动而让右边的盒子上去
需要设置其左边距为负的自己的宽度，也就是.right {margin-left：-150px;}這样右盒子才可以在一行的最右边显示出自己。
你是不是以为搞定了其实并没有，因为中间主体部分的“center可以”这几个字被挡住叻，也就是说新来的这两个所谓“飞翼”把主体的内容挡住了所以我们还需要把这两个小破翼给挪出去，但是又不能挪到屏幕外边因為这样我们就看不到了。
所以呢我们做如下操作，利用父级元素设置左右内边距的值把父级的三个子盒子往中间挤。即.wrap{ padding: 0 150px 0 100px;}这样就給这两个小破翼腾出了一点空间。
最后把左右两个小破翼分别“抽出来”，即
这样这个什么什么双飞茶杯布局就完成了。
相信看了本文案例你已经掌握了方法更多精彩请关注 其它相关文章！
Safari浏览器select下拉列表文字太长不换行的解决方法
Gulp命令生成精灵图
以上就是css嘚自适应布局的内容，更多请关注 其它相关文章！
郑重声明：本文版权归原作者所有转载文章仅为传播更多信息之目的，如作者信息标記有误请第一时间联系我们修改或删除，多谢
