国产精品一区二区三区……-大杳蕉伊人欧美一本遒在饯-日本不卡一区免费在线观看-国产亚洲欧美中文字幕

400-800-9385
網(wǎng)站建設(shè)資訊詳細(xì)

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

發(fā)表日期:2019-01-14 11:10:59   作者來源:方維網(wǎng)絡(luò)   瀏覽:4895   標(biāo)簽:響應(yīng)式網(wǎng)站設(shè)計    
在響應(yīng)式布局中經(jīng)常碰到這樣的情況,如兩個并排的div盒子(當(dāng)然也可是多個并排的div盒子),一個盒子里面放的是圖片(在這里我們稱為A盒子),一個盒子里面放的是文字描述內(nèi)容(在這里我們稱為B盒子),兩個盒子各占整個頁面寬度的50%(或者有多個div盒子寬度一樣,或者多個div盒子寬度不一樣,其中有一個或多個盒子包裹一張圖片),然而高度要求一樣;這樣就造成了在適應(yīng)不同大小的屏幕時,A盒子高度會隨圖片的改變而改變,而B盒子高度不會出現(xiàn)變化,影響布局和頁面的美觀。
下面這張圖片能夠讓大家有清楚的認(rèn)識,效果如圖:
 

需要達(dá)到的效果

HTML如圖:

HTML代碼

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

效果如圖:
 

響應(yīng)式效果圖

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

響應(yīng)式網(wǎng)站除了設(shè)計要有全局性,考慮不同終端的排版外,前端制作也是非??简灱夹g(shù)。

如沒特殊注明,文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請注明來自http://pdcharm.com/news/4859.html
西平县| 宜君县| 咸阳市| 巴中市| 永吉县| 嘉兴市| 德阳市| 嘉义市| 广德县| 永新县| 榆树市| 和林格尔县| 枣庄市| 和林格尔县| 安图县| 珠海市| 营口市| 麻江县| 南汇区| 宾川县| 霍林郭勒市| 布尔津县| 山丹县| 东至县| 盐池县| 虞城县| 邢台市| 大连市| 南陵县| 闽清县| 香港 | 黔江区| 咸丰县| 屏东市| 汉寿县| 大荔县| 阿拉尔市| 内黄县| 岳池县| 呼图壁县| 方正县|