Question

我有一个容器div。在div内部是以700px间隔（容器的宽度）对齐的三个图形。我们的想法是，其他2个图表将隐藏在屏幕之外，当用户与网页上的各种控件进行交互时，我可以使用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;并为已设置为隐藏的溢出元素设置高度。

Answer 2

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

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

Answer 3

如果你想隐藏div，你考虑过“display：none”吗？例如，
<div class="graph" style="display: none"/>

CSS溢出隐藏

3 个答案: