DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 寬度百分比單位的轉換公式及示例
寬度百分比單位的轉換公式及示例
編輯:布局實例     

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

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

例如:
 

復制代碼 代碼如下:
<div id=wrapper>
<header><header>
<section></section>
<aside></aside>
</div>


原CSS:

復制代碼 代碼如下:
#wrapper {width:1000px;}
header {width:1000px;}
aside {width:220px;float:left;}
section {width:770px;float:right;}


百分比寬度CSS:

復制代碼 代碼如下:


#wrapper {width:98%;}//指定外圍寬度,數值隨意
header{width:100%;}//套公式1000÷1000(這個1000是wrapper的寬度)=1=100%
aside{width:22%;float:left;}//套公式220÷1000=0.22=22%
section{width:77%;float:right;}//套公式 770÷1000=0.77=77%

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved