css多種方式實現等高布局的示例代碼

【css多種方式實現等高布局的示例代碼】本文講的等高布局是在不手動設置元素高度的情況下,使用純css實現各個元素高度都相當的效果 。如圖:

css多種方式實現等高布局的示例代碼

1、使用table-cell實現(兼容IE8)
css多種方式實現等高布局的示例代碼

2、使用flex布局實現
css多種方式實現等高布局的示例代碼

3、利用margin實現等高布局(實際開發中不建議使用)
實現上面的等高布局除了可以使用table-cell、flex布局外還可以利用margin負值來實現
css多種方式實現等高布局的示例代碼

使用margin負值有一個缺點,如圖:
css多種方式實現等高布局的示例代碼

底部邊框不見了,因為被父元素的overflow: hidden;切割掉了 。

相關經驗推薦