Question

我正在尝试建立一个网站，其中有一个div的“旋转木马”，它们都是并排（左侧浮动），每个都有一个全屏宽度。使用javascript我打算通过移动“轮播”将不同的div移动到视图中。

我的问题是，由于某些原因，当我设置溢出时：隐藏在包含轮播的div上，所有内容都被隐藏。当我用萤火虫检查时，div显示在正确的位置，但没有任何内容可见。

这是HTML：

<div id="content_window">
    <div id="carousel">
        <div id="p_home" class="pane">
            Home!
        </div>
        <div id="p_about" class="pane">
            About!
        </div>
        <div id="p_services" class="pane">
            Services!
        </div>
        <div id="p_contact" class="pane">
            Contact!
        </div>
    </div>
</div>

CSS：

#content_window
{
    position:relative;
width:100%;
overflow:hidden;
}

#carousel
{
    position:absolute;
    width:400%;
    top:50px;
    left:0;
    overflow:hidden;
}

.pane
{
    float:left;
    width:25%;
    color:White;
    text-align:left;
    margin-top:50px;
}

如果我将溢出：隐藏在#content_window之外，则窗格中的内容变为可见，但添加了水平滚动条，您可以滚动并查看所有窗格。有谁知道我做错了什么？

Answer 1

当div除了浮动元素或定位元素之外什么都不包含时，它的高度变为0. 是div＃content_window的问题。尝试为该div添加高度：

#content_window
{
height: 120px;
}

Answer 2

根本不需要使用绝对定位。只需将content_window剪辑为轮播的视口即可。请参阅http://jsbin.com/uhubij/edit#html。

CSS更简单：

#content_window {
    width:100%;
    overflow:hidden;
}

#carousel {
    width:400%;
}

.pane {
    float:left;
    width:25%;
    text-align:left;
    margin-top:50px;
}

要在窗格之间切换，请将margin-left添加到#carousel。第一个窗格位于margin-left: 0%（默认）。第二个窗格位于margin-left: -100%;。第三个窗格位于margin-left: -200%;等...例如，此处是窗格2：http://jsbin.com/uhubij/2/edit#html

HTML基本相同（除了我为你添加了一个清算div）：

<div id="content_window">
    <div id="carousel">
        <div id="p_home" class="pane">
            Home!
        </div>
        <div id="p_about" class="pane">
            About!
        </div>
        <div id="p_services" class="pane">
            Services!
        </div>
        <div id="p_contact" class="pane">
            Contact!
        </div>
        <div style="clear: both;"></div>
    </div>
</div>

设置溢出：隐藏在父级上隐藏所有内容

2 个答案: