0

我有四个 div 标签。其中之一是.maindiv。其余的都在里面.main上课.sub。我想要的是首先在里面显示第一个 div 标签.main，其余的将放在第一个 div 标签的右侧，但是overflow主 div 标签的隐藏了，所以其他两个 div 标签不显示，只有第一个是可见的. 我试图用这段代码来实现这一点。我怎样才能做到这一点？

.main {
    width: 100%;
    height: 500px;
    background: red;
    overflow: hidden;
}

.sub {
    width: 100%;
    height: 300px;
    float: left;
}

.blue { background: lightblue; }
.green { background: green; }
.orange { background: orange; }
4

2 回答 2

1

假设我对您的理解正确，并且您想查看所有三个subdiv，一个在左侧，两个在右侧，问题是您已将宽度设置为 100%，因此没有空间容纳它们漂浮在彼此旁边。

您需要设置它们的宽度，以便它们不会占据容器的整个宽度，例如它们每个都可以是 50% 宽。

您还需要设置右侧两个 div 的高度，以便它们的总高度与左侧的 div 相同，如果您希望它们对齐。

更新：

为了使最初只有左侧 div 可见，我认为最好在子 div 周围添加另一个包装 div，如下所示：

<div class="main">
    <div class="wrapper">
        <div class="sub blue"></div>
        <div class="sub green"></div>
        <div class="sub orange"></div>
    </div>    
</div>

宽度设置为 200%。

.wrapper {
    width:200%;
}

然后，当您希望右侧 div 变得可见时，您可以通过重新定位包装 div 将它们滑动到屏幕上，或者使用变换、相对位置或边距设置。

更新的小提琴示例

于 2013-05-12T12:29:53.747 回答
0

我不知道为什么，但我发现如果在这种情况下您在第一项下方有空间，它将无法按预期工作..

所以让子匹配的高度然后它会起作用：

.sub {
    width: 100%;
    height: 500px;
    float: left;
}

http://jsfiddle.net/Ex9EC/2/

可能这是完全错误的方法，所以等待知道的人发表评论吧？

此外，我认为可能有一些关于如何设置外部/容器 div 的位置（相对、绝对或固定）的问题，这就是我添加它的原因，但它似乎也可以在没有它的情况下工作：

http://jsfiddle.net/Ex9EC/3/

于 2013-05-12T11:20:27.133 回答