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

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

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

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

下面我們就來對這兩種方法分別簡單介紹一下。

一.css寬度自適應之兩列布局：

我們以右側寬度固定，左側寬度自適應為例：

1、固定寬度區(qū)浮動，自適應區(qū)不設寬度而設置margin

<divid="wrap">

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

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

</div>

#sidebar{

float:right;width:300px;

}#content{

margin-right:300px;

}

注意：

右側一直固定不動，左側根據(jù)屏幕的剩余大小自適應。

但實際上這個方法是有局限性的，那就是html結構中sidebar必須在content之前才行。

2、float與margin配合使用

<divid="wrap">

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

<divclass="contentInner">

自適應區(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;

}

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

3、固定寬度區(qū)使用絕對定位，自適應區(qū)設置margin

<divid="wrap">

<divid="content"style="height:500px;background:#000;color:#fff;">我現(xiàn)在的結構是在前面</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實現(xiàn)

<divid="wrap">

<divid="content"style="height:500px;background:#000;color:#fff;">我現(xiàn)在的結構是在前面</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以及以下瀏覽器不兼容，因為IE7設置display為table不識別。

二.css寬度自適應之三列布局：

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;/*設置高度只為結果更直觀，高度可根據(jù)內容自適應*/

margin:50pxauto;

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

}

.left{

width:200px;

height:500px;/*設置高度只為結果更直觀，高度可根據(jù)內容自適應*/

background:#6E6C8A;

float:left;/*設為左浮動*/

text-align:center;

}

.middle{

width:430px;

height:500px;/*設置高度只為結果更直觀，高度可根據(jù)內容自適應*/

background:#806155;

float:left;/*設為左浮動*/

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

text-align:center;

}

.right{

width:150px;

height:500px;/*設置高度只為結果更直觀，高度可根據(jù)內容自適應*/

background:#8F9068;

float:right;/*設為右浮動*/

text-align:center;

}

2、左右固定寬度、中間自適應寬度的三列布局

<!--<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;

}

可以不要這個父元素div0（即默認父元素為body），如果有，需將這個父元素設置為相對定位*/

.left{

width:200px;

height:500px;

background:#6E6C8A;

position:absolute;

top:0;l

eft:0;

/*設為絕對定位并且與其父元素的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;

/*設為絕對定位并且與其父元素的top、right距離都為0*/

text-align:center;

}

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

關于“css寬度自適應怎么實現(xiàn)”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

網頁題目：css寬度自適應怎么實現(xiàn)
分享地址：http://www.chinadenli.net/article44/joiche.html

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

廣告

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