宽度百分比单位的转换公式及示例

ttx9n · 发表于 2013-7-3 16:12:05

转换公式：目标宽度÷上下文宽度=结果(比例宽度) ，当前元素的像素宽度÷当前元素的父元素的像素宽度=当前元素的百分比宽度，有需要的朋友可以参考下哈目标宽度÷上下文宽度=结果(比例宽度)

当前元素的像素宽度÷当前元素的父元素的像素宽度=当前元素的百分比宽度

例如：

复制代码代码如下:
<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%

pwseqn1h · 发表于 2022-8-18 11:55:27

看到这帖子真是高兴！

0vwrdf6 · 发表于 2022-8-22 19:51:15

数据库了多久撒快乐的健身卡啦

3mfwk4yf · 发表于 2022-12-18 12:23:29

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

Alisaliu · 发表于 2024-3-15 22:49:09

好东西可以可以可以可以

shw5ovr · 发表于 2024-5-27 01:09:30

逛逛看看瞧瞧

mkonji · 发表于 2024-5-27 16:06:52

快更新啊，我擦

btbhs8t · 发表于 2024-7-14 05:33:13

看看怎么样再说

fzyzy · 发表于 2024-9-5 12:47:52

建军节建军节建军节建军节

u6h2m4 · 发表于 2024-9-19 02:40:03

呵呵呵呵呵呵呵a

账号		自动登录	找回密码
密码			立即注册

[CSS] 宽度百分比单位的转换公式及示例

相关帖子