首頁 >web前端 >css教學 >CSS網頁版面入門教學5:二列寬度自適應_基礎教學

CSS網頁版面入門教學5:二列寬度自適應_基礎教學

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB原創
2016-05-16 12:07:171611瀏覽

從二列固定寬度入手,開始嘗試二列佈局的情況下,左右欄寬度能夠做到自適應,從一列自適應佈局中我們知道,設定自適應主要通過寬度的百分比值設置,因此在二列寬度自適應的佈局中也同樣是百分比寬度值的設計,繼續上面的CSS程式碼,我們得新定義二列的寬度值: 

複製程式碼 代碼如下:

#left { 
    background-color: #E8F5FE; 
  float: left; 
    height: 300px; 
    width: 20%; 

#right { 
p穿; #A5CF3D;      float: left; 
     float: left; 
    height: 300px; 
    width: 70%; 


左欄寬度設定為寬度為寬度20%的70%,看起來像一個左側為導航,右側為內容的常見網頁形式。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn