如何调整CSS中active/deactive切换时右侧div的收缩方向？

当前右侧Div收缩方向不符合预期，原因是它以左侧边缘为基准进行宽度变化。只需调整CSS定位逻辑，就能让它向右侧收缩：

修改步骤 #

1. 调整右侧Div的基础定位：将.right的left:50%替换为right:0，让元素的右侧固定在屏幕最右端，宽度50vw自然覆盖右半部分。
2. 保持展开样式的正确性：.right.active需要保留left:0和width:100vw，确保点击后能铺满整个屏幕，同时重置right属性避免冲突。

修改后的完整CSS代码 #

.left {
    top: 0vh;
    left: 0vw;
    position: absolute;
    background-color: rgb(33, 216, 88);
    height: 100vh;
    width: 50vw;
    transition: all 0.5s ease;
}

.right {
    top: 0vh;
    position: absolute;
    background-color: rgb(56, 111, 230);
    height: 100vh;
    width: 50vw;
    right: 0; /* 替换原left:50%，让元素右侧对齐屏幕边缘 */
    transition: all 0.5s ease;
}

.left.active {
    width: 100vw;
}

.left.deactive {
    width: 0vw;
}

.right.active {
    top: 0;
    left: 0;
    width: 100vw;
    right: auto; /* 重置right属性，避免定位冲突 */
}

.right.deactive {
    width: 0vw;
}

效果说明 #

修改后，点击左侧Div时，右侧Div会以屏幕右边缘为基准从左向右收缩（向右侧收起）；点击右侧Div时，依然能正常展开铺满屏幕，左侧Div从左向右收缩，完全符合需求。

内容的提问来源于stack exchange，提问作者Caden The Yak