国产女人被狂躁到高潮小说,亚洲日韩一区二区三区,色窝窝无码一区二区三区成人网站 ,丰满岳乱妇在线观看中字无码

400-800-9385
網站建設資訊詳細

Js for循環多個盒子等高

發表日期:2018-09-17 08:44:39   作者來源:嚴成   瀏覽:5480   標簽:    
最近在項目中碰到一個頭痛的問題,一時不好解決,想了很多辦法,最后通過自己的實踐,摸索出了兩種解決方案。先來看看案例,一般情況下要使兩個div盒子等高,就只要設置兩個高度一樣就行了,可在實際項目中,很多時候不一樣,就比如說,左邊盒子的內容是固定好的年份2018,右邊盒子是這年里發布的新聞,而這年里發布的新聞數量是不固定,有可能增加或刪減,所以高度就不能固定,實際高度只能靠內容撐開。如下圖:
圖1:

效果展示樣式

html代碼如下:
圖2:

html代碼

圖1左邊盒子和右邊盒子都分別設置了左浮動和右浮動、背景顏色、寬度,這樣明顯看出,兩邊的高度不一樣,一開始我設置左邊盒子高度100%,可一點用都沒有,后來苦思冥想,想到了css屬性定位(position),瞬間就打開了我的思路。
css代碼如下:
圖3:

CSS代碼

結果:
圖4:

展示代碼2

從圖4可以看出成功了,左邊盒子的高度和右邊盒子的高度是一樣的,可難道就只有這一種方法嗎?我又進入了苦思冥想中,終于我想到使用js方法。
在使用js 方法時我也進入了誤區,想著獲取右邊盒子的高度賦予左邊盒子就行了,可后來想到左邊盒子年份不止一個,而是很多個,而右邊內容盒子每個高度都不一樣,就要分別賦值,這樣來不是很麻煩嗎?還不如使用css定位簡單,在我慢慢摸索中想到了for循環,這下解決了,廢話不多說直接上圖。
圖5:

JS代碼2

結果成功了,我就不上圖了。

作者:方維網絡技術嚴成
如沒特殊注明,文章均為方維網絡原創,轉載請注明來自http://www.sdlwjx666.com/news/4591.html