仅显示主div内的第一个div标签

我有四个div标签。其中之一是.main股利。其余的都在.main和.sub类。我想要的是首先显示.main中的第一个div标签，其余的将放置在第一个div标签的右侧，但主div标签的overflow被隐藏，因此其他两个div标签不会仅显示在第一个是可见的。我试图用this code来实现这一点。我怎样才能做到这一点？仅显示主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; }

来源

2013-05-12 2619

给不同的'id'给他们，并把'显示：none'在 “绿色” 和 “橙色”？然后，如果你想要显示它们，你可以用javascript来更改'style' – Sergio 2013-05-12 11:17:15

假设我已经正确理解你，你想看到所有三个sub的div，一个在左边，两个在右边，问题是，你设置宽度为100％，所以没有空间让他们漂浮在一起。

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

您还需要在右侧设置两个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

来源

2013-05-12 12:29:53

是的，我想在左边放置1个div，在右边放置其他2个div，但所有div都应该占据100％的宽度，并且只能看到第一个。然后我会有一个下一个按钮。当用户点击下一个按钮时，第一个div将向左移动并变为不可见，第二个div将动画并变为可见。 – 2619 2013-05-12 12:33:25

更新了我的答案，以说明如何做到这一点。 – 2013-05-12 12:51:08

我不知道为什么，但我发现，如果你在这种情况下，有第一项下方空间料将不会工作。

所以让子匹配的高度，然后它的工作：

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

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

大概这是完全错误的做法，但这样等待别人谁知道，也许评论？

而且我觉得可能是一些关于外/ div容器的位置如何必须设置（以相对的，绝对的或固定的），这就是为什么我补充说，但它似乎没有它的工作太：

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

来源

2013-05-12 11:20:27 gordatron

仅显示主div内的第一个div标签

回答

相关问题