等高布局的方法1

等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧。

1.1、实现要点（需求）

• 多列

• 每一列背景不同

• 其中任意一列变高，其它列同步变高

1.2、方法一

1.2.1、原理

利用padding和margin负值相抵消

1.2.3、优缺点

• 利用padding提前延伸背景

• 利用margin负值抵销padding的占位

• 1.2.2、实现步骤

• 通过浮动创建一个正常的三列布局（不同列背景不同）

• 父容器清浮动

• 合理的控制padding和margin值

• 可以实现任意列等高布局

  • 每一列固定padding-bottom，同时指定一个margin负值，抵销padding的占位

  • 父容器overflow:hidden