Jsfor循環(huán)多個(gè)盒子等高

2023-03-07 分類：網(wǎng)站建設(shè)

最近在項(xiàng)目中碰到一個(gè)頭痛的問題，一時(shí)不好解決，想了很多辦法，最后通過(guò)自己的實(shí)踐，摸索出了兩種解決方案。先來(lái)看看案例，一般情況下要使兩個(gè)div盒子等高，就只要設(shè)置兩個(gè)高度一樣就行了，可在實(shí)際項(xiàng)目中，很多時(shí)候不一樣，就比如說(shuō)，左邊盒子的內(nèi)容是固定好的年份2018，右邊盒子是這年里發(fā)布的新聞，而這年里發(fā)布的新聞數(shù)量是不固定，有可能增加或刪減，所以高度就不能固定，實(shí)際高度只能靠?jī)?nèi)容撐開。如下圖：

效果展示樣式

圖1：
html代碼如下：

html代碼

圖2：
圖1左邊盒子和右邊盒子都分別設(shè)置了左浮動(dòng)和右浮動(dòng)、背景顏色、寬度，這樣明顯看出，兩邊的高度不一樣，一開始我設(shè)置左邊盒子高度100%，可一點(diǎn)用都沒有，后來(lái)苦思冥想，想到了css屬性定位（position），瞬間就打開了我的思路。
css代碼如下：

CSS代碼

圖3：
結(jié)果：

展示代碼2

圖4：
從圖4可以看出成功了，左邊盒子的高度和右邊盒子的高度是一樣的，可難道就只有這一種方法嗎？我又進(jìn)入了苦思冥想中，終于我想到使用js方法。
在使用js 方法時(shí)我也進(jìn)入了誤區(qū)，想著獲取右邊盒子的高度賦予左邊盒子就行了，可后來(lái)想到左邊盒子年份不止一個(gè)，而是很多個(gè)，而右邊內(nèi)容盒子每個(gè)高度都不一樣，就要分別賦值，這樣來(lái)不是很麻煩嗎？還不如使用css定位簡(jiǎn)單，在我慢慢摸索中想到了for循環(huán)，這下解決了，廢話不多說(shuō)直接上圖。

JS代碼2

圖5：

結(jié)果成功了，我就不上圖了。

當(dāng)前標(biāo)題：Jsfor循環(huán)多個(gè)盒子等高
標(biāo)題網(wǎng)址：http://www.2m8n56k.cn/news33/242183.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、Google、電子商務(wù)、動(dòng)態(tài)網(wǎng)站、微信公眾號(hào)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕第五页-中文字幕第页-中文字幕韩国-中文字幕最新-国产尤物二区三区在线观看-国产尤物福利视频一区二区

Jsfor循環(huán)多個(gè)盒子等高