這篇文章將為大家詳細講解有關(guān)css寬度自適應(yīng)怎么實現(xiàn)，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)主要從事網(wǎng)頁設(shè)計、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機版網(wǎng)站建設(shè)）、響應(yīng)式網(wǎng)站設(shè)計、程序開發(fā)、網(wǎng)站優(yōu)化、微網(wǎng)站、微信小程序定制開發(fā)等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的成都做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、網(wǎng)絡(luò)營銷經(jīng)驗，集策劃、開發(fā)、設(shè)計、營銷、管理等多方位專業(yè)化運作于一體。
我們經(jīng)常會看到這樣的頁面，左側(cè)（或者右側(cè)）為固定的導(dǎo)航或者菜單欄，另一側(cè)將會隨著瀏覽器的縮放而自適應(yīng)改變其大小，這其實就是寬度自適應(yīng)的實現(xiàn)。
css寬度自適應(yīng)中最常見的實現(xiàn)方法有兩種，一種是兩列布局，另一種是三列布局
下面我們就來對這兩種方法分別簡單介紹一下。
一.css寬度自適應(yīng)之兩列布局：
我們以右側(cè)寬度固定，左側(cè)寬度自適應(yīng)為例：
1、固定寬度區(qū)浮動，自適應(yīng)區(qū)不設(shè)寬度而設(shè)置margin
#sidebar{
float:right;width:300px;
}#content{
margin-right:300px;
}
注意：
右側(cè)一直固定不動，左側(cè)根據(jù)屏幕的剩余大小自適應(yīng)。
但實際上這個方法是有局限性的，那就是html結(jié)構(gòu)中sidebar必須在content之前才行。
2、float與margin配合使用
自適應(yīng)區(qū)
#content{
margin-left:-300px;float:left;width:100%;
}#content.contentInner{
margin-left:300px;
}#sidebar{
float:right;width:300px;
}
說明：這樣實現(xiàn)，contentInner的實際寬度就是屏幕寬度-300px。
3、固定寬度區(qū)使用絕對定位，自適應(yīng)區(qū)設(shè)置margin
#wrap{
position:relative;
}#content{
margin-right:300px;
}#sidebar{
position:absolute;
width:300px;
right:0;
top:0;
}
4、使用display:table實現(xiàn)
#wrap{
display:table;
width:100%;
}#content{
display:table-cell;
}#sidebar{
width:300px;
display:table-cell;
}
注意：這一種方法在IE7以及以下瀏覽器不兼容，因為IE7設(shè)置display為table不識別。
二.css寬度自適應(yīng)之三列布局：
1、固定寬度三列布局
*{
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è)為左浮動*/
text-align:center;
}
.middle{
width:430px;
height:500px;/*設(shè)置高度只為結(jié)果更直觀，高度可根據(jù)內(nèi)容自適應(yīng)*/
background:#806155;
float:left;/*設(shè)為左浮動*/
margin:010px010px;/*左右各加10px使得三列之間有間隙*/
text-align:center;
}
.right{
width:150px;
height:500px;/*設(shè)置高度只為結(jié)果更直觀，高度可根據(jù)內(nèi)容自適應(yīng)*/
background:#8F9068;
float:right;/*設(shè)為右浮動*/
text-align:center;
}
2、左右固定寬度、中間自適應(yīng)寬度的三列布局
*{
padding:0;
margin:0;}
/*.div0{
width:800px;
height:500px;
margin:50pxauto;
position:relative;
border:2pxsolid#E51414;
}
可以不要這個父元素div0（即默認父元素為body），如果有，需將這個父元素設(shè)置為相對定位*/
.left{
width:200px;
height:500px;
background:#6E6C8A;
position:absolute;
top:0;l
eft:0;
/*設(shè)為絕對定位并且與其父元素的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è)為絕對定位并且與其父元素的top、right距離都為0*/
text-align:center;
}
說明：當左右兩個div寬度固定，中間的div寬度未知時，使用浮動不能實現(xiàn)三列布局。使用絕對定位才能實現(xiàn)三列布局：需要將左邊和右邊的元素設(shè)置為絕對定位，將中間的元素margin值的左右分別設(shè)置為右邊元素和左邊元素的寬度。不需要父元素的包裹，即可實現(xiàn)三列布局，如果有父元素，需要將父元素設(shè)置為相對定位。
關(guān)于“css寬度自適應(yīng)怎么實現(xiàn)”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
重慶分公司
重慶分公司
