是否可以并排设置两个 div，而一个 div 在屏幕之外而不使用显示 none 或宽度为零？

Question

将它们并排放置没有问题。但是 - 一个 div 可以超出屏幕宽度吗？

我想在 DIV1 上方插入带有动画的 DIV2，而 DIV2 已经打开并准备好显示，但我不想玩它的宽度或显示，只改变的是位置，所以它会从侧面进入屏幕。

两个div的宽度和高度应该是100%。那可以怎样做呢？我可以设置 overflow-x 隐藏，所以没有水平滚动，但我认为两者的宽度 100% 都有问题。

请指教

Answer 1

您想要采用的方法不适用于 width:100%。为了使用这种方法，必须明确设置两个子 div 的宽度（不是百分比）。

虽然您使用的是 javascript，但您可以尝试测量父容器的可用宽度，然后使用该值。如果您使用的是 jquery，则可以使用

这样的表达式

$('#parentContainer').outerWidth()

获取这个值。

Answer 2

用绝对定位就可以做到。对于第二个 div 设置宽度：100% 和左侧：100%

<div id="wrapper">
    <div id="div1">
    </div>
    <div id="div2">
    </div>
</div>

CSS

#wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

#div1{
    background: yellow;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#div2{
    background: green;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 100%;
}

https://jsfiddle.net/p1ga7669/

是否可以并排设置两个 div，而一个 div 在屏幕之外而不使用显示 none 或宽度为零？

Is it possible to set two div's side by side, while one div is outside of the screen without using display none or width zero?

html

css

animation

scroll