0

所以如果我想有两个 div，每个 100% 的整个页面，并排，考虑到包装器有overflow:hidden，我应该如何实现它？

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

我也尝试过使用float ，但它导致了错误。

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

提前致谢！

4

3 回答 3

2

如果我对您的理解正确，您可以在使用inline-block. 您只需要对空格稍加小心（即您需要确保两个子div元素之间没有空格）。我已经div通过设置阻止了 s 的换行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/尝试一下。

编辑：这是使用的替代实现：http position: absolute;: //jsfiddle.net/8Q3pS/5/。这样您就可以使用left. 请注意，您需要在 parent 上设置高度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;
    }
于 2013-09-23T15:14:37.377 回答
0

您可以不将最大宽度设置为 100%，不设置实际宽度并将它们并排浮动吗？两个溢出：隐藏，当它们展开时，它应该创建水平滚动条。

于 2013-09-23T15:03:41.107 回答
0

这应该纯粹是使用绝对定位将其中一个 div 定位到页面之外并使用悬停状态或 javascript 转换左侧属性的问题。

将鼠标悬停在红色 div 上。

代码笔示例

于 2013-09-23T15:16:26.397 回答