最近在項(xiàng)目中碰到一個(gè)頭痛的問題,一時(shí)不好解決,想了很多辦法,最后通過自己的實(shí)踐,摸索出了兩種
解決方案。先來看看案例,一般情況下要使兩個(gè)div盒子等高,就只要設(shè)置兩個(gè)高度一樣就行了,可在實(shí)際項(xiàng)目中,很多時(shí)候不一樣,就比如說,左邊盒子的內(nèi)容是固定好的年份2018,右邊盒子是這年里發(fā)布的新聞,而這年里發(fā)布的新聞數(shù)量是不固定,有可能增加或刪減,所以高度就不能固定,實(shí)際高度只能靠內(nèi)容撐開。如下圖:
圖1:
html代碼如下:
圖2:
圖1左邊盒子和右邊盒子都分別設(shè)置了左浮動和右浮動、背景顏色、寬度,這樣明顯看出,兩邊的高度不一樣,一開始我設(shè)置左邊盒子高度100%,可一點(diǎn)用都沒有,后來苦思冥想,想到了css屬性定位(position),瞬間就打開了我的思路。
css代碼如下:
圖3:
結(jié)果:
圖4:
從圖4可以看出成功了,左邊盒子的高度和右邊盒子的高度是一樣的,可難道就只有這一種方法嗎?我又進(jìn)入了苦思冥想中,終于我想到使用js方法。
在使用js 方法時(shí)我也進(jìn)入了誤區(qū),想著獲取右邊盒子的高度賦予左邊盒子就行了,可后來想到左邊盒子年份不止一個(gè),而是很多個(gè),而右邊內(nèi)容盒子每個(gè)高度都不一樣,就要分別賦值,這樣來不是很麻煩嗎?還不如使用css定位簡單,在我慢慢摸索中想到了for循環(huán),這下解決了,廢話不多說直接上圖。
圖5:
結(jié)果成功了,我就不上圖了。
網(wǎng)頁題目:Jsfor循環(huán)多個(gè)盒子等高
分享鏈接:http://m.rwnh.cn/news33/242183.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、網(wǎng)站導(dǎo)航、定制開發(fā)、域名注冊、企業(yè)建站、網(wǎng)站設(shè)計(jì)
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)