這篇文章將為大家詳細(xì)講解有關(guān)css寬度自適應(yīng)怎么實(shí)現(xiàn)，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)主要從事網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、響應(yīng)式網(wǎng)站設(shè)計(jì)、程序開(kāi)發(fā)、網(wǎng)站優(yōu)化、微網(wǎng)站、微信小程序定制開(kāi)發(fā)等，憑借多年來(lái)在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的成都做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷(xiāo)經(jīng)驗(yàn)，集策劃、開(kāi)發(fā)、設(shè)計(jì)、營(yíng)銷(xiāo)、管理等多方位專(zhuān)業(yè)化運(yùn)作于一體。

我們經(jīng)常會(huì)看到這樣的頁(yè)面，左側(cè)（或者右側(cè)）為固定的導(dǎo)航或者菜單欄，另一側(cè)將會(huì)隨著瀏覽器的縮放而自適應(yīng)改變其大小，這其實(shí)就是寬度自適應(yīng)的實(shí)現(xiàn)。

css寬度自適應(yīng)中最常見(jiàn)的實(shí)現(xiàn)方法有兩種，一種是兩列布局，另一種是三列布局

下面我們就來(lái)對(duì)這兩種方法分別簡(jiǎn)單介紹一下。

一.css寬度自適應(yīng)之兩列布局：

我們以右側(cè)寬度固定，左側(cè)寬度自適應(yīng)為例：

1、固定寬度區(qū)浮動(dòng)，自適應(yīng)區(qū)不設(shè)寬度而設(shè)置margin

<divid="wrap">

<divid="sidebar"style="height:500px;background:red;color:#fff;">固定寬度區(qū)</div>

<divid="content"style="height:500px;background:#000;color:#fff;">自適應(yīng)區(qū)</div>

</div>

#sidebar{

float:right;width:300px;

}#content{

margin-right:300px;

}

注意：

右側(cè)一直固定不動(dòng)，左側(cè)根據(jù)屏幕的剩余大小自適應(yīng)。

但實(shí)際上這個(gè)方法是有局限性的，那就是html結(jié)構(gòu)中sidebar必須在content之前才行。

2、float與margin配合使用

<divid="wrap">

<divid="content"style="height:500px;background:#000;color:#fff;">

<divclass="contentInner">

自適應(yīng)區(qū)</div>

</div>

<divid="sidebar"style="height:500px;background:red;color:#fff;">固定寬度區(qū)</div>

</div>

#content{

margin-left:-300px;float:left;width:100%;

}#content.contentInner{

margin-left:300px;

}#sidebar{

float:right;width:300px;

}

說(shuō)明：這樣實(shí)現(xiàn)，contentInner的實(shí)際寬度就是屏幕寬度-300px。

3、固定寬度區(qū)使用絕對(duì)定位，自適應(yīng)區(qū)設(shè)置margin

<divid="wrap">

<divid="content"style="height:500px;background:#000;color:#fff;">我現(xiàn)在的結(jié)構(gòu)是在前面</div>

<divid="sidebar"style="height:500px;background:red;color:#fff;">固定寬度區(qū)</div>

</div>

#wrap{

position:relative;

}#content{

margin-right:300px;

}#sidebar{

position:absolute;

width:300px;

right:0;

top:0;

}

4、使用display:table實(shí)現(xiàn)

<divid="wrap">

<divid="content"style="height:500px;background:#000;color:#fff;">我現(xiàn)在的結(jié)構(gòu)是在前面</div>

<divid="sidebar"style="height:500px;background:red;color:#fff;">固定寬度區(qū)</div>

</div>

#wrap{

display:table;

width:100%;

}#content{

display:table-cell;

}#sidebar{

width:300px;

display:table-cell;

}

注意：這一種方法在IE7以及以下瀏覽器不兼容，因?yàn)镮E7設(shè)置display為table不識(shí)別。

二.css寬度自適應(yīng)之三列布局：

1、固定寬度三列布局

<divclass="div0">

<divclass="left">left</div>

<divclass="middle">middle</div>

<divclass="right">right</div>

</div>

*{

padding:0;

margin:0;

}

.div0{

width:800px;

height:500px;/*設(shè)置高度只為結(jié)果更直觀，高度可根據(jù)內(nèi)容自適應(yīng)*/

margin:50pxauto;

border:2pxsolid#E51414;/*添加邊框只為結(jié)果更直觀*/

}

.left{

width:200px;

height:500px;/*設(shè)置高度只為結(jié)果更直觀，高度可根據(jù)內(nèi)容自適應(yīng)*/

background:#6E6C8A;

float:left;/*設(shè)為左浮動(dòng)*/

text-align:center;

}

.middle{

width:430px;

height:500px;/*設(shè)置高度只為結(jié)果更直觀，高度可根據(jù)內(nèi)容自適應(yīng)*/

background:#806155;

float:left;/*設(shè)為左浮動(dòng)*/

margin:010px010px;/*左右各加10px使得三列之間有間隙*/

text-align:center;

}

.right{

width:150px;

height:500px;/*設(shè)置高度只為結(jié)果更直觀，高度可根據(jù)內(nèi)容自適應(yīng)*/

background:#8F9068;

float:right;/*設(shè)為右浮動(dòng)*/

text-align:center;

}

2、左右固定寬度、中間自適應(yīng)寬度的三列布局

<!--<divclass="div0">-->

<divclass="left">left</div>

<divclass="middle">middle</div>

<divclass="right">right</div>

<!--</div>-->

*{

padding:0;

margin:0;}

/*.div0{

width:800px;

height:500px;

margin:50pxauto;

position:relative;

border:2pxsolid#E51414;

}

可以不要這個(gè)父元素div0（即默認(rèn)父元素為body），如果有，需將這個(gè)父元素設(shè)置為相對(duì)定位*/

.left{

width:200px;

height:500px;

background:#6E6C8A;

position:absolute;

top:0;l

eft:0;

/*設(shè)為絕對(duì)定位并且與其父元素的top、left距離都為0*/

text-align:center;

}

.middle{

height:500px;

background:#806155;

margin:0160px0210px;

/*左右各加10px使得三列之間有間隙*/

text-align:center;

}

.right{

width:150px;

height:500px;

background:#8F9068;

position:absolute;

top:0;

right:0;

/*設(shè)為絕對(duì)定位并且與其父元素的top、right距離都為0*/

text-align:center;

}

說(shuō)明：當(dāng)左右兩個(gè)div寬度固定，中間的div寬度未知時(shí)，使用浮動(dòng)不能實(shí)現(xiàn)三列布局。使用絕對(duì)定位才能實(shí)現(xiàn)三列布局：需要將左邊和右邊的元素設(shè)置為絕對(duì)定位，將中間的元素margin值的左右分別設(shè)置為右邊元素和左邊元素的寬度。不需要父元素的包裹，即可實(shí)現(xiàn)三列布局，如果有父元素，需要將父元素設(shè)置為相對(duì)定位。

關(guān)于“css寬度自適應(yīng)怎么實(shí)現(xiàn)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)頁(yè)題目：css寬度自適應(yīng)怎么實(shí)現(xiàn)
分享地址：http://chinadenli.net/article44/joiche.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、小程序開(kāi)發(fā)、響應(yīng)式網(wǎng)站、微信公眾號(hào)、軟件開(kāi)發(fā)、面包屑導(dǎo)航

廣告

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