響應(yīng)式網(wǎng)站布局div盒子高度問題(css響應(yīng)式布局)

2024-04-30 分類：網(wǎng)站建設(shè)

在響應(yīng)式布局中經(jīng)常碰到這樣的情況，如兩個并排的div盒子（當(dāng)然也可是多個并排的div盒子），一個盒子里面放的是圖片（在這里我們稱為A盒子），一個盒子里面放的是文字描述內(nèi)容（在這里我們稱為B盒子），兩個盒子各占整個頁面寬度的50%（或者有多個div盒子寬度一樣，或者多個div盒子寬度不一樣，其中有一個或多個盒子包裹一張圖片），然而高度要求一樣；這樣就造成了在適應(yīng)不同大小的屏幕時，A盒子高度會隨圖片的改變而改變，而B盒子高度不會出現(xiàn)變化，影響布局和頁面的美觀。
下面這張圖片能夠讓大家有清楚的認識，效果如圖：

HTML如圖:
在響應(yīng)式網(wǎng)站設(shè)計布局中，不能設(shè)置固定高度，高度要隨瀏覽器寬度的變化而變化，這里想到了JS來設(shè)置高度來解決。因為我在這里用得jquery的版本較低，所以用的是$(window).load(function(){}),高版本請用$(window).on(“load”,function(){})。

JS如圖：
效果如圖：

A、B兩個盒子的高度一致了，不管瀏覽器的寬度怎么變化，兩個盒子的高度始終一致。

響應(yīng)式網(wǎng)站除了設(shè)計要有全局性，考慮不同終端的排版外，前端制作也是非常考驗技術(shù)。

以上就是關(guān)于響應(yīng)式網(wǎng)站布局div盒子高度問題(css響應(yīng)式布局)，希望對你有幫助，更多內(nèi)容關(guān)注創(chuàng)新互聯(lián)。

本文標(biāo)題：響應(yīng)式網(wǎng)站布局div盒子高度問題(css響應(yīng)式布局)
瀏覽地址：http://jinyejixie.com/news14/326714.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、營銷型網(wǎng)站建設(shè)、微信小程序、ChatGPT、云服務(wù)器、搜索引擎優(yōu)化

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

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

成都網(wǎng)站建設(shè)的流程 2024-04-30
成都網(wǎng)站制作需要規(guī)避的問題 2024-04-30
成都網(wǎng)站建設(shè)之網(wǎng)站建設(shè)不是“一錘子買賣” 2024-04-30
網(wǎng)站設(shè)計如何在網(wǎng)頁中使用AI？ 2024-04-30
在成都企業(yè)網(wǎng)站開發(fā)建設(shè)已經(jīng)不可或缺了 2024-04-30
設(shè)計的時候怎么樣去把握網(wǎng)頁布局 2024-04-30
什么是Web開發(fā)？如何成為一個PythonWeb開發(fā)人員？ 2024-04-30

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

響應(yīng)式網(wǎng)站布局div盒子高度問題(css響應(yīng)式布局)