博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS之创建等高列布局之三
阅读量:4210 次
发布时间:2019-05-26

本文共 422 字,大约阅读时间需要 1 分钟。

4. 使用正padding和负margin对冲实现多列布局方法

这种方法很简单,就是在所有列中使用正的上、下padding和负的上、下margin,并在所有列外面加上一个容器,并设置overflow:hiden把溢出背景切掉。下面一起来看代码

HTML:

这里写图片描述

CSS:

这里写图片描述

这里代码的关键就是’margin-bottom:-99999px’和’padding-bottom:99999px’

5. 使用边框和定位模拟列等高

这种方法是使用边框和绝对定位来实现一个假的高度相等列的效果。假设你需要实现一个两列等高布局,侧栏高度要和主内容高度相等

HTML:

这里写图片描述

CSS:

这里写图片描述

缺点:这个方法就是无法单独给主内容列设置背景色,并且实现多列效果效果不佳

6. 模仿表格布局实列等高列效果

这种方法只适合现代浏览器,本不想介绍的,不过还是顺便列出让大家参考一下吧

HTML:

这里写图片描述

CSS:

这里写图片描述

优点:这是一种非常简单,易于实现的方法

缺点:兼容性不好,在ie6-7无法正常运行

你可能感兴趣的文章
自动化测试工具的3个关键部分
查看>>
测试工具厂商的编程语言什么时候“退休”?
查看>>
资源监控工具 - Hyperic HQ
查看>>
LoadRunner中Concurrent与Simultaneous的区别
查看>>
SiteScope - Agentless监控
查看>>
QTP测试.NET控件CheckedListBox
查看>>
使用QTP的.NET插件扩展技术测试ComponentOne的ToolBar控件
查看>>
用上帝之眼进行自动化测试
查看>>
为LoadRunner写一个lr_save_float函数
查看>>
PrefTest工作室全新力作-《性能测试与调优实战》课程视频即将上线
查看>>
质量度量分析与测试技术 培训大纲
查看>>
欢迎加入【亿能测试快讯】邮件列表!
查看>>
为什么我们的自动化测试“要”这么难
查看>>
LoadRunner性能脚本开发实战训练
查看>>
测试之途,前途?钱途?图何?
查看>>
adb常用命令
查看>>
通过LR监控Linux服务器性能
查看>>
通过FTP服务的winsockes录制脚本
查看>>
LRwinsocket协议测试AAA服务器
查看>>
Net远程管理实验
查看>>