Question

我有四个div标签。其中一个是.main div。其余部分位于.main内，.sub个类。我想要的是首先在.main内显示第一个div标签，其余的将放在第一个div标签的右侧，但主div标签的overflow被隐藏，以便其他两个div标签只显示第一个是可见的。我想用this code来实现这个目标。我怎样才能做到这一点？

.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; }

Answer 1

假设我已经正确理解了你，并且你想要看到所有三个sub div，左边一个，右边两个，问题是你已经将宽度设置为100％，所以没有空间让它们彼此相邻。

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

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

<强>更新：

为了使它最初只能看到左边的div，我认为你最好在sub divs周围添加另一个包装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来将它们滑动到屏幕上，或者使用变换，相对位置或边距设置。

Updated fiddle example

Answer 2

我不知道为什么，但我发现如果你在这种情况下第一项以下的空间，它就不会按预期工作..

所以使子匹配的高度然后它将起作用：

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

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

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

另外我认为可能有一些关于如何设置外部/容器div的位置（相对的，绝对的或固定的），这就是为什么我添加了它，但似乎没有它也可以工作：

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

在主div中只显示第一个div标签

2 个答案: