本文讲的等高布局是在不手动设置元素高度的情况下,使用纯css实现各个元素高度都相当的效果 。如图:
![css多种方式实现等高布局的示例代码](http://pic.yunnanlong.com/230524/0I5115224-0.jpg)
1、使用table-cell实现(兼容IE8)
![css多种方式实现等高布局的示例代码](http://pic.yunnanlong.com/230524/0I511AE-1.png)
2、使用flex布局实现
![css多种方式实现等高布局的示例代码](http://pic.yunnanlong.com/230524/0I51135V-2.png)
3、利用margin实现等高布局(实际开发中不建议使用)
实现上面的等高布局除了可以使用table-cell、flex布局外还可以利用margin负值来实现
![css多种方式实现等高布局的示例代码](http://pic.yunnanlong.com/230524/0I5114038-3.png)
使用margin负值有一个缺点,如图:
![css多种方式实现等高布局的示例代码](http://pic.yunnanlong.com/230524/0I51125X-4.jpg)
【css多种方式实现等高布局的示例代码】底部边框不见了,因为被父元素的overflow: hidden;切割掉了 。
推荐阅读
- 10分钟入门CSS3 Animation
- 水蚺和蟒蛇的区别
- 原核细胞的增殖方式是什么
- 海洋碳汇渔业的主要方式
- 发动机共振大噪音大怎么处理
- css实现文字居中两边横线效果的示例代码
- 浅谈CSS 高度塌陷问题
- 更改N6上网接入方式的方法
- b站纪念账号怎么申请 b站怎么设置去世后账号处理方式
- NOKIA QD+蓝牙+PC通过GPRS上网的另一种方式