最近在項目中碰到一個頭痛的問題,一時不好解決,想了很多辦法,最后通過自己的實踐,摸索出了兩種解決方案。先來看看案例,一般情況下要使兩個div盒子等高,就只要設置兩個高度一樣就行了,可在實際項目中,很多時候不一樣,就比如說,左邊盒子的內容是固定好的年份2018,右邊盒子是這年里發布的新聞,而這年里發布的新聞數量是不固定,有可能增加或刪減,所以高度就不能固定,實際高度只能靠內容撐開。如下圖:
圖1:
html代碼如下:
圖2:
圖1左邊盒子和右邊盒子都分別設置了左浮動和右浮動、背景顏色、寬度,這樣明顯看出,兩邊的高度不一樣,一開始我設置左邊盒子高度100%,可一點用都沒有,后來苦思冥想,想到了css屬性定位(position),瞬間就打開了我的思路。
css代碼如下:
圖3:
結果:
圖4:
從圖4可以看出成功了,左邊盒子的高度和右邊盒子的高度是一樣的,可難道就只有這一種方法嗎?我又進入了苦思冥想中,終于我想到使用js方法。
在使用js 方法時我也進入了誤區,想著獲取右邊盒子的高度賦予左邊盒子就行了,可后來想到左邊盒子年份不止一個,而是很多個,而右邊內容盒子每個高度都不一樣,就要分別賦值,這樣來不是很麻煩嗎?還不如使用css定位簡單,在我慢慢摸索中想到了for循環,這下解決了,廢話不多說直接上圖。
圖5:
結果成功了,我就不上圖了。
作者:方維網絡技術嚴成