UC知道div布局问题：定位和占位。
来源：百度知道 编辑：UC知道 时间：2024/05/13 20:09:05
需要达成如下效果：
页面分为4个部分。
1 | 2
3 | 4
当1隐藏时则
3 | 2
| 4
此时如果再隐藏3则页面
2
4
如果隐藏2则页面
3 | 4
若隐藏1后再隐藏2则页面
3 | 4
如果不能这么复杂，那可不可以将横向上所有的层隐藏 下方的的层就自动上移？纵向也是如此。
一楼说的我知道.关键是定位.用相对定位的话,横向的会有占位情况.绝对定位却不会收缩.
页面分为4个部分。
1 | 2
3 | 4
当1隐藏时则
3 | 2
| 4
此时如果再隐藏3则页面
2
4
如果隐藏2则页面
3 | 4
若隐藏1后再隐藏2则页面
3 | 4
如果不能这么复杂，那可不可以将横向上所有的层隐藏 下方的的层就自动上移？纵向也是如此。
一楼说的我知道.关键是定位.用相对定位的话,横向的会有占位情况.绝对定位却不会收缩.
你可以把1、3套在一个层里，2、4套在一个层里。这两个外套的层可以不设置高和宽，让它们自适应。这样这两个层的高宽就由他内部的内容决定了。也就达到你要的效果了。
首先我们可以把1、3当作整体，2、4当作整体（理由是我们已经把他分别套在一个层里了）。当1隐藏3就自然上移，而2、4不变。也就实现了你的
3 | 2
| 4
此时如果在隐藏你的3，由于你1、3外套的层宽高是自适应的。所以也就实现了你的
2
4
（自然如果你要的是1、3原来的位置要保留 那就要把外套的层设置宽高。如果你的意思是1、3隐藏后2、4自动占用1、3的位置，那么你就只能把1、3的外套层的宽高设置自适应。因为这样当1、3隐藏后。此层的内容是空，它也就没有了宽和高。）
但1英才后再隐藏2时由于1、3是套在一个层里。2、4是套在一个层里。2隐藏4自然会上移代替2的位置。
所以也就实现了你想要的效果。
display:none 是取消元素显示..会消除元素在dom里的占位
而 visibility:hidden 则是隐藏