Iefans,靠谱的软件下载站

首页 最新文章 最新安卓 最新苹果 浏览器 IE教程 在线图片编辑 最新软件 最新游戏

当前位置: IEfans / IE专区 / IE技巧/ css多种方式实现等高布局的示例代码

css多种方式实现等高布局的示例代码

编辑:秩名2023-02-28 09:30:02

本文讲的等高布局是在不手动设置元素高度的情况下,使用纯css实现各个元素高度都相当的效果。如图:

1、使用table-cell实现(兼容IE8)

image.png

2、使用flex布局实现

image.png

3、利用margin实现等高布局(实际开发中不建议使用)

实现上面的等高布局除了可以使用table-cell、flex布局外还可以利用margin负值来实现

image.png

使用margin负值有一个缺点,如图:

底部边框不见了,因为被父元素的overflow: hidden;切割掉了。

返回旧版Copyright © 1998-2023 www.iefans.net All Rights Reserved 沪ICP备17019769号-18 意见反馈