浅谈三列等高自适应布局 - 凡事预则立,不预则废

前些时候写了一篇关于两列自适应的文章,既然写了两列,不写写三列想想也过不去,其实原理应该是差不多的,那么就写了。

首先我的想法是直接让左侧float:left;右侧float:right; 然后中间利用hasLayout,实现自适应,最后将中间部分的结构移动到右侧的下边,测试,结果还真没想到第一次测试就成功,除了IE6下面还有上次我说的IE 3px bug其他浏览器在我测试的范围内都兼容了,但是这样也有一个问题,那就是文档结构乱了。

然后我想一般来说两边的宽度我们都应该是已知的,那么就利用上次的边上绝对定位,然后让中间负边距已达到自适应的要求,那么测试,正如我所想这个方法依然还是那么兼容,而且结构也是中规中矩的,应该是应用比较实在的一个方案。

暂时自适应只说到这里,其实我也只想到了这些,既然标题上说等高,那么就还是要等高,就目前要实现纯CSS等高,就我知道的,应该就只有 padding结合margin负边距抵消法和多层嵌套,废话不说,测试上,这次试的还不错,跟一种三列适应的方式,实现等高,但是问题就是结构还是乱的。

0评论

发表评论

最新评论及回复

    loading

最近发表

    loading

网站分类

    loading

文章归档

    loading

友情链接

Top Comments Footer