CSS之创建等高列布局之三
分类:
文章
•
2025-03-24 15:49:27
4. 使用正padding和负margin对冲实现多列布局方法
这种方法很简单，就是在所有列中使用正的上、下padding和负的上、下margin，并在所有列外面加上一个容器，并设置overflow:hiden把溢出背景切掉。下面一起来看代码
HTML:
CSS:
这里代码的关键就是’margin-bottom:-99999px’和’padding-bottom:99999px’
5. 使用边框和定位模拟列等高
这种方法是使用边框和绝对定位来实现一个假的高度相等列的效果。假设你需要实现一个两列等高布局，侧栏高度要和主内容高度相等
HTML：
CSS：
缺点：这个方法就是无法单独给主内容列设置背景色，并且实现多列效果效果不佳
6. 模仿表格布局实列等高列效果
这种方法只适合现代浏览器，本不想介绍的，不过还是顺便列出让大家参考一下吧
HTML：
CSS：
优点：这是一种非常简单，易于实现的方法
缺点：兼容性不好，在ie6-7无法正常运行
