html - 仅显示主 div 中的第一个 div 标签

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%，因此没有空间让它们并排 float 。

您需要设置它们的宽度，以便它们不会占据容器的整个宽度，例如，它们每个可以是 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 将它们滑到屏幕上。

Updated fiddle example