Question

因此，如果我希望有两个div，每个100％的整个页面，并排，假设包装器有overflow:hidden，我该如何实现呢？

我尝试过使用inline-block，但它没有用。

我尝试过使用float ，但却导致错误。

我希望隐藏第二个div，这样我就可以将其更改为动画，就像幻灯片一样。

提前致谢！

Answer 1

如果我理解正确，您可以在使用inline-block后实现目标。你必须要小心一点白色空间（即你需要确保两个子div元素之间没有空白区域）。我通过设置div来阻止white-space: nowrap;的包装。

<div class="foo">
    <div> woo woo !</div><div> woo woo !</div>
</div>

.foo {
    overflow: hidden;
    white-space: nowrap;        
}
    .foo > div {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        background: aqua;
    }
    .foo > div +  div {
        background: lime;
    }

在http://jsfiddle.net/8Q3pS/2/处尝试。

修改：以下是使用position: absolute;的替代实施：http://jsfiddle.net/8Q3pS/5/。这样，您就可以使用left将第二个动画设置为视图。请注意，您需要在父div上设置高度。

.foo {
    position: relative;
    width: 100%;
    height: 1.5em;
    overflow: hidden;
}
    .foo > div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: aqua;
    }
    .foo > div +  div {
        left: 100%;
        background: lime;
    }

Answer 2

你能不能将max-width设置为100％，不设置实际宽度并将它们并排浮动？使用overflow：hidden，当它们展开时，它应该创建水平滚动条。

Answer 3

这应该纯粹是使用绝对定位并使用悬停状态或javascript转换left属性来将一个div定位在页面之外。

悬停红色div。

<强> Codepen Example

将两个100％宽度的div并排放置

3 个答案: