前面的話

等高布局是指子元素在父元素中高度相等的布局方式。等高布局的實(shí)現(xiàn)包括偽等高和真等高，偽等高只是看上去等高而已，真等高是實(shí)實(shí)在在的等高。本文將介紹邊框模擬、負(fù)margin這兩種偽等高以及table實(shí)現(xiàn)、absolute實(shí)現(xiàn)、flex實(shí)現(xiàn)和js判斷這四種真等高布局

偽等高

邊框模擬　　

因?yàn)樵剡吙蚝驮馗叨仁冀K是相同高度，用元素的邊框顏色來偽裝左右兩個(gè)兄弟元素的背景色。然后將左右兩個(gè)透明背景的元素使用absolute覆蓋在中間元素的左右邊框上，實(shí)現(xiàn)視覺上的等高效果

[注意]左右兩側(cè)元素高度不能大于中間元素高度，否則無法撐開容器高度

發(fā)表評(píng)論 共有條評(píng)論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表