css布局的相关几个难点

Posted 2020-06-23 奥斯特里茨

前几天被问的一种布局方式,三列布局左右两列固定宽度，中间一列自适应的布局方案：

1.当然css3里面的flex是可以实现这种情况的，但是这个属性实在是兼容性太差，这里就说一种自己查的普适方案；

2.当时第一次看到这个题目的时候我想到的是float的方式，可是后来一想不行啊，浮动的话中间不能自适应啊，因为页面宽度降低，浮动的元素就会被挤压到下一层：废话少说这里的解决方案是，左右两列使用绝对定位的两边，中间元素使用百分比布局，然后再加上margin-left=左边元素的宽度，margin-right=右边元素的宽度，或者是使用padding-left和padding-right；

3、使用浮动其实也是可以的，刚才一百度，发现鑫旭大神的方案float+margin=clear：both也是可以的，自己思维太死板了。

4、flex方案的总觉的有自己的一些瑕疵或者得加上很多限制比如：http://www.111cn.net/cssdiv/css/77415.htm，对了，差点忘了js也是可以控制的。

ps：

鑫旭大神：http://www.zhangxinxu.com/wordpress/2009/11/%E6%88%91%E7%86%9F%E7%9F%A5%E7%9A%84%E4%B8%89%E7%A7%8D%E4%B8%89%E6%A0%8F%E7%BD%91%E9%A1%B5%E5%AE%BD%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95/

 

其实这个解决方案是受到了另外一个布局方案的启发的，高度自适应div，有一个高度固定100px，另一个自适应高度，该如何实现？

这里我就不班门弄斧了，直接贴上答案：https://segmentfault.com/q/1010000000762512/a-1020000000762933

我的理解：1、方法和上面的三列相同

2、使用border-sizeing+绝对定位