css寬度自適應怎么實現

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

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

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

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

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

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

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

　　<divid="wrap">

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

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

　　</div>

　　#sidebar{

　　float:right;width:300px;

　　}#content{

　　margin-right:300px;

　　}

　　注意：

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

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

　　2、float與margin配合使用

　　<divid="wrap">

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

　　<divclass="contentInner">

　　自適應區</div>

　　</div>

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

　　</div>

　　#content{

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

　　}#content.contentInner{

　　margin-left:300px;

　　}#sidebar{

　　float:right;width:300px;

　　}

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

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

　　<divid="wrap">

　　<divid="content"style="height:500px;background:#000;color:#fff;">我現在的結構是在前面</div>

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

　　</div>

　　#wrap{

　　position:relative;

　　}#content{

　　margin-right:300px;

　　}#sidebar{

　　position:absolute;

　　width:300px;

　　right:0;

　　top:0;

　　}

　　4、使用display:table實現

　　<divid="wrap">

　　<divid="content"style="height:500px;background:#000;color:#fff;">我現在的結構是在前面</div>

　　<divid="sidebar"style="height:500px;background:red;color:#fff;">固定寬度區</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;/*設置高度只為結果更直觀，高度可根據內容自適應*/

　　margin:50pxauto;

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

　　}

　　.left{

　　width:200px;

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

　　background:#6E6C8A;

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

　　text-align:center;

　　}

　　.middle{

　　width:430px;

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

　　background:#806155;

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

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

　　text-align:center;

　　}

　　.right{

　　width:150px;

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

　　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寬度未知時，使用浮動不能實現三列布局。使用絕對定位才能實現三列布局：需要將左邊和右邊的元素設置為絕對定位，將中間的元素margin值的左右分別設置為右邊元素和左邊元素的寬度。不需要父元素的包裹，即可實現三列布局，如果有父元素，需要將父元素設置為相對定位。

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