如今的網頁佈局是需要適應於各種螢幕的,因此就需要來實現自適應使得網頁中的內容來完全的顯示,所以,今天的這篇文章就來給大家介紹一下關於css寬度自適應的內容。詳細的說一說css自適應佈局中css寬度自適應該如何實現。
相關文章推薦:
1.css高度自適應如何實現? css高度根據內容自適應的簡單方法
# 2.CSS中常見自適應佈局有哪些
相關影片推薦:
1.CSS影片教學-玉女心經版
我們經常會看到這樣的頁面,左側(或右側)為固定的導航或選單欄,另一側將會隨著瀏覽器的縮放而自適應改變其大小,這其實就是寬度自適應的實現。
css寬度自適應中最常見的實作方法有兩種,一種是兩列佈局,另一種是三列佈局
下面我們就來對這兩種方法分別簡單介紹一下。
一. css寬度自適應之兩列佈局:
我們以右側寬度固定,左側寬度自適應為例:
#1、固定寬度區浮動,自適應區不設寬度而設定margin
<div id="wrap"> <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div> <div id="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搭配使用
<div id="wrap"> <div id="content" style="height:500px;background:#000;color:#fff;"> <div class="contentInner"> 自适应区 </div> </div> <div id="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
<div id="wrap"> <div id="content" style="height:500px;background:#000;color:#fff;">我现在的结构是在前面</div> <div id="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實作
<div id="wrap"> <div id="content" style="height:500px;background:#000;color:#fff;">我现在的结构是在前面</div> <div id="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、固定寬度三列佈局
<div class="div0"> <div class="left">left</div> <div class="middle">middle</div> <div class="right">right</div> </div>
*{ padding: 0; margin: 0; } .div0{ width: 800px; height: 500px;/*设置高度只为结果更直观,高度可根据内容自适应*/ margin: 50px auto; border: 2px solid #E51414;/*添加边框只为结果更直观*/ } .left{ width: 200px; height: 500px;/*设置高度只为结果更直观,高度可根据内容自适应*/ background: #6E6C8A; float: left;/*设为左浮动*/ text-align: center; } .middle{ width: 430px; height: 500px;/*设置高度只为结果更直观,高度可根据内容自适应*/ background: #806155; float: left;/*设为左浮动*/ margin: 0 10px 0 10px;/*左右各加10px使得三列之间有间隙*/ text-align: center; } .right{ width: 150px; height: 500px;/*设置高度只为结果更直观,高度可根据内容自适应*/ background: #8F9068; float: right;/*设为右浮动*/ text-align: center; }
2、左右固定寬度、中間自適應寬度的三列佈局
<!--<div class="div0">--> <div class="left">left</div> <div class="middle">middle</div> <div class="right">right</div> <!--</div>-->
*{ padding: 0; margin: 0;} /*.div0{ width: 800px; height: 500px; margin: 50px auto; position: relative; border: 2px solid #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: 0 160px 0 210px; /*左右各加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手冊)
相關建議:
CSS如何實現div寬度根據內容自適應_html/css_WEB-ITnose
css實作右側固定寬度,左側寬度自適應_html/css_WEB-ITnose
以上是css自適應佈局:css寬度自適應如何實現?的詳細內容。更多資訊請關注PHP中文網其他相關文章!