Javascript 有没有办法固定第三个分区

有没有办法使第三个

div

定位为

固定的
，因为当我单击
slideUp
按钮时，
div
正在折叠。我希望他们都能在当前位置上下滑动。我认为这是由于flexbox，因为它是整个事情的中心。我试着把它去掉，但还是不起作用


$（文档）.ready（函数（）{
$（“#btn2”）。单击（函数（）{
$（“#div1”）.slideUp（）；
$（“#div2”）.slideUp（“慢”）；
美元(第三分部).slideUp(3000元);；
});
$（“#btn1”）。单击（函数（）{
$（“#div1”）.slideDown（）；
$（“#div2”）。向下滑动（“慢速”）；
美元（“#div3”）。向下滑动（3000）；
});
});
h1{
文本对齐：居中；
}
#btn1{
位置：绝对位置；
左：60vw；
}
#btn2{
位置：绝对位置；
左：20vw；
}
钮扣{
填充：15px 60px；
}
#弯曲{
显示器：flex；
位置：绝对位置；
顶部：30vh；
证明内容：周围的空间；
宽度：99vw；
}
#flex>div{
宽度：30vw；
边框：1px纯黑；
高度：30vh；
}
#第一组{
背景色：蓝紫色；
}
#第二组{
背景颜色：鲑鱼；
}
#第三组{
背景颜色：绿黄色；
}
按钮：激活，
按钮：已访问{
背景颜色：黄色；
}
怀特先生{
背景色：白色；
}

分配
使用不同的参数演示slideUP（）和slideDown（）。
单击以向下滑动框
单击以滑动框
请再试一次

您只需添加包装器
div
，并将其设置为
width

.wrapper{
width:33.33%;
}


$（文档）.ready（函数（）{
$（“#btn2”）。单击（函数（）{
$（“#div1”）.slideUp（）；
$（“#div2”）.slideUp（“慢”）；
美元(第三分部).slideUp(3000元);；
});
$（“#btn1”）。单击（函数（）{
$（“#div1”）.slideDown（）；
$（“#div2”）。向下滑动（“慢速”）；
美元（“#div3”）。向下滑动（3000）；
});
});
h1{
文本对齐：居中；
}
#btn1{
位置：绝对位置；
左：60vw；
}
#btn2{
位置：绝对位置；
左：20vw；
}
钮扣{
填充：15px 60px；
}
#弯曲{
显示器：flex；
位置：绝对位置；
顶部：200px；
证明内容：周围的空间；
宽度：99vw；
}
#flex>div>div{
宽度：30vw；
边框：1px纯黑；
高度：30vh；
}
#第一组{
背景色：蓝紫色；
}
#第二组{
背景颜色：鲑鱼；
}
#第三组{
背景颜色：绿黄色；
}
按钮：激活，
按钮：已访问{
背景颜色：黄色；
}
怀特先生{
背景色：白色；
}
.包装纸{
宽度：33.33%；
}

分配
使用不同的参数演示slideUP（）和slideDown（）。
单击以向下滑动框
单击以滑动框
您可以试试这个，它会根据您在
#flex
中放入的
div的数量自动调整。对于div中的问题，您是正确的，一旦它们达到0高度，它们将趋于消失，并且由于它们通过flex居中，div趋向于自身居中。现在将它封装在div中可以防止它消失


$（文档）.ready（函数（）{
$（“#btn2”）。单击（函数（）{
$（“#div1”）.slideUp（）；
$（“#div2”）.slideUp（“慢”）；
美元(第三分部).slideUp(3000元);；
});
$（“#btn1”）。单击（函数（）{
$（“#div1”）.slideDown（）；
$（“#div2”）。向下滑动（“慢速”）；
美元（“#div3”）。向下滑动（3000）；
});
$（“#flex div”）.parent（）.css({
“宽度”：（（100/（$）.parent（）.length））.toFixed（0）-1）+“%”，
“显示”：“内联块”，
“垂直对齐”：“顶部”
});
});
h1{
文本对齐：居中；
}
#btn1{
位置：绝对位置；
左：60vw；
}
#btn2{
位置：绝对位置；
左：20vw；
}
钮扣{
填充：15px 60px；
}
#弯曲{
显示：表格；
位置：绝对位置；
顶部：30vh；
证明内容：周围的空间；
宽度：99vw；
}
#flex>div>div{
宽度：30vw；
边框：1px纯黑；
高度：30vh；
}
#第一组{
背景色：蓝紫色；
}
#第二组{
背景颜色：鲑鱼；
}
#第三组{
背景颜色：绿黄色；
}
按钮：激活，
按钮：已访问{
背景颜色：黄色；
}
怀特先生{
背景色：白色；
}

分配
使用不同的参数演示slideUP（）和slideDown（）。
单击以向下滑动框
单击以滑动框
这是另一种方法。这根本不依赖于
display:flex
。在这里，我们使
flex
div有一个
位置：相对的
，它是子对象，即
flex>div
或
框
有一个
位置：绝对的

现在，在JS代码的开头，我添加了一点来动态地处理这些绝对定位的子元素的
左
位置。在我们的例子中，
div1
将以
left=0%
结束，
div2
以
left=33%
结束，
div3
以
left=66%
结束。我还添加了平滑的
过渡
，以弥补元素定位的延迟

现在，您的
slideUp
和
slideDown
正在处理绝对定位的元素，这些元素实际上不占用任何空间，如正常位置：静态（是，这是默认情况下的）元素。因此，您现在不需要将它们包装在其他单独的div中

此外，这只是众多方法中的一种。我很想分享它


$（文档）.ready（函数（）{
设leftPos=0；
让box=[…document.querySelectorAll（'.box'）]；
对于（让索引=1；索引div{
宽度：30vw；
位置：绝对位置；
边框：1px纯黑；
过渡：左0.5s；
高度：30vh；
}
#第一组{
背景色：蓝紫色；
}
#第二组{
背景颜色：鲑鱼；
左：0
}
#第三组{
背景颜色：绿黄色；
左：0
}
按钮：激活，
按钮：已访问