<!
DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
?
<
html?
xmlns
="http://www.w3.org/1999/xhtml"
>
?
<
head
>
?
<
meta?
http-equiv
="Content-Type"
?content
="text/html;?charset=gb2312"
?
/>
?
<
title
>
無標題文檔
</
title
>
?
<
style?
type
="text/css"
>
?
<!--?
div?
{
?
div?
?height
:
?5em
;
?
?line-height
:
?5em
;
?
?text-align
:
?center
;
?
?margin
:
?0
;
?
?padding
:
?0
;
?
}
?
#d1,?#d3,?#d4,?#d6?
{
?
?float
:
?left
;
?
?background
:
?#CCC
;
?
}
?
#d1?
{
?
?width
:
?20%
;
?
}
?
#d2?
{
?
?float
:
?left
;
?
?width
:
?30%
;
?
?background
:
?red
;
?
}
?
#d3?
{
?
?width
:
?50%
;
?
}
?
#d4?
{
?
?width
:
?200px
;
?
?margin-right
:
?-3px
;
?
}
?
#d5?
{
?
?background
:
?red
;
?
?line-height
:
?1.4em
;
?
?text-align
:
?left
;
?
}
?
#d6?
{
?
?width
:
?300px
;
?
?float
:
?right
;
?
?margin-left
:
?-3px
;
?
}
?
div[id="d4"]?
{
?
?margin-right
:
?0?!important
;
?
}
?
div[id="d6"]?
{
?
?margin-left
:
?0?!important
;
?
}
?
-->?
</
style
>
?
</
head
>
?
<
body
>
?
<
h2
>
百分比寬度
</
h2
>
?
<
div?
id
="d1"
>
20%
</
div
>
?
<
div?
id
="d2"
>
30%
</
div
>
?
<
div?
id
="d3"
>
50%
</
div
>
?
<
h2
>
自適應
</
h2
>
?
<
div?
id
="d4"
>
left:200px
</
div
>
?
<
div?
id
="d6"
>
right:300px
</
div
>
?
<
div?
id
="d5"
>
自適應自適應自適應自適應自適應自適應自適應自適應自適應自適應自適應自適應自適應自適應自適應自適應
</
div
>
?
</
body
>
?
</
html
>
在firefox1.5，IE5.5，IE6.0，Oprea8.5下測試通過。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
