前几天被问的一种布局方式,三列布局左右两列固定宽度,中间一列自适应的布局方案:
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:
其实这个解决方案是受到了另外一个布局方案的启发的,高度自适应div,有一个高度固定100px,另一个自适应高度,该如何实现?
这里我就不班门弄斧了,直接贴上答案:https://segmentfault.com/q/1010000000762512/a-1020000000762933
我的理解:1、方法和上面的三列相同
2、使用border-sizeing+绝对定位
时间: 2024-11-09 02:11:32