寬度百分比單位的轉換公式

目標寬度÷上下文寬度=結果(比例寬度)  css

當前元素的像素寬度÷當前元素的父元素的像素寬度=當前元素的百分比寬度 

例如:
[html]
  1. <div id=wrapper>  
  2. <header><header>  
  3. <section></section>  
  4. <aside></aside>  
  5. </div>  

 
原CSS: 
[css]
  1. #wrapper {width:1000px;}   
  2. header {width:1000px;}   
  3. aside {width:220px;float:left;}   
  4. section {width:770px;float:right;}   

百分比寬度CSS: 
[css]
  1. #wrapper {width:98%;}//指定外圍寬度,數值隨意   
  2. header{width:100%;}//套公式1000÷1000(這個1000是wrapper的寬度)=1=100%   
  3. aside{width:22%;float:left;}//套公式220÷1000=0.22=22%   
  4. section{width:77%;float:right;}//套公式 770÷1000=0.77=77%
相關文章
相關標籤/搜索