查看: 1433|回复: 2

页面排列中左侧对齐和居中对齐的原理和差别是?

[复制链接]

4

主题

12

帖子

20

积分

会员

Rank: 5Rank: 5

积分
20
发表于 2021-5-20 17:56:23 | 显示全部楼层 |阅读模式
产品经理入门到精通
一、前提条件
有一个很疑惑的问题,麻烦大佬帮忙解释下,没太搞懂。原型如下图所示,说明一下1、红色:动态面板,固定到浏览器左侧顶部,300*75
2、蓝色:动态面板,1000*100,页面载入时设置其宽度为[[Window.width-300]]
3、绿色:用来测量红色和蓝色距离,动态面板,固定到浏览器左侧顶部,160*30(删除后不影响现象中描述的结果)
4、我浏览器的Window.width值为1920

1.png

二、现象
1、页面排列设置为左侧对齐时,结果如下
2.png
2、页面排列设置为居中对齐时,结果如下
3.png
三、疑惑
1、为啥两种方式有差异?
2、为什么两种方式下差160(绿色的宽度),啥原理?

491

主题

6780

帖子

7万

积分

管理员

创始人

Rank: 9Rank: 9Rank: 9

积分
75873

实名认证

QQ
发表于 2021-5-21 14:57:13 | 显示全部楼层
动态面板固定到浏览器左边,是永远绝对的。而页面居中随着宽度的不同,左右的空白就会长短不一。
如果你想两个东西的位置保持不关,需要所有的都居左或是居中。
像你上边红色的面板,可以设置为相对浏览器左右居中,然后指定一个负边距让它移动到左边,但是由于浏览器宽度可能不同,左边未必是从0开始。

4

主题

12

帖子

20

积分

会员

Rank: 5Rank: 5

积分
20
 楼主| 发表于 2021-6-25 15:52:43 | 显示全部楼层
尹广磊 发表于 2021-5-21 14:57
动态面板固定到浏览器左边,是永远绝对的。而页面居中随着宽度的不同,左右的空白就会长短不一。
如果你想 ...

了解
另外一个问题,页面排列设置为居中时,是怎么运算的。比如上图的红色和蓝色面板,当设置为居中时蓝色距离红色的距离时130,而且此时浏览器有横向的滚动条。我能理解的算法如下,但明显不是。
Windows.width(1920)-  红色.width(300)- 蓝色.width(1000)=620,然后除以2,此时蓝色应该距红色310,没有横向滚动条
上述算法的原理来自一个元件时居中显示距离左侧的距离:假设页面中只有一个蓝色面板,1920-1000=920,然后除以2,蓝色应该距离左右倒是460.
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|手机版|友情链接|版权声明|关于我们|SiteMap|Axure中文社区

GMT+8, 2021-9-18 05:52

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表