是否可以并排设置两个div，而一个div在屏幕之外而不使用display none或width zero？

Question

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

我想用动画在DIV1上方插入DIV2，而DIV2已经打开并准备好被看到，但我不想玩它的宽度或显示，只是 更改是位置，因此它将从侧面进入屏幕。

两个div应该是100％的宽度和高度。这可以完成一些如何？ 我可以设置overflow-x隐藏，所以没有水平滚动，但我认为两者的宽度都有100％的问题。

请告知。

Answer 1

可以通过绝对定位来完成。对于第二个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/

Answer 2

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

由于您使用的是javascript，您可以尝试测量父容器的可用宽度，然后使用该值。如果你正在使用jquery，你可以使用像

这样的表达式

  

$（＆＃39;＃parentContainer＆＃39）。outerWidth（）

获得此值。