CSS溢出隐藏

Question

我有一个容器div。在div内部是三个以700px间隔(容器宽度)对齐的图。我的想法是，当用户与网页上的各种控件交互时，其他两个图形将隐藏在屏幕之外，然后我可以使用jQuery滑过它们。

我的代码的简化版本如下所示：

风格

    #graphcontainer {
        height: 260px;
        overflow: hidden;
        width: 700px;
    }
    .graph {
        position: absolute;
    }

HTML

<div id="graphcontainer">
        <div class="graph" style="left: 0px;"></div>
        <div class="graph" style="left: 700px;"></div>
        <div class="graph" style="left: 1400px;"></div>
</div>

由于某些原因，位于右侧的第二个和第三个图表仍然可见！如何确保它们不可见？

Answer 1

首先，您必须为父对象设置position:relative。然后，您必须设置父对象的高度。

演示：http://jsfiddle.net/Scfdk/

Answer 2

您需要添加position: relative;并为您将overflow设置为隐藏的元素设置高度。

Answer 3

如果你想隐藏一个div，你是否考虑过"display: none"？例如,

<div class="graph" style="display: none"/>