Question

我有两列各50％的宽度。在每一列中，我都有溢出的内容绝对相对于身体。

<div class='column left'>
    <div class='inner'><h1>Pink</h1></div>
</div>
<div class='column right '>
    <div class='inner'><h1>Blue</h1></div>
</div>

我需要隐藏inner个div。我怎么做？在.column上设置overflow:hidden对inner div没有影响。 Fiddle HERE

PS。我们的想法是为列的宽度设置动画并显示内部内容。 This fiddle说明了我要实现的目标（但由于浏览器的要求，我使用的vh，vw无法使用）

html, body {
    width :100%;
    height: 100%;
    position: relative;
}

.column {
    float: left;
    width: 50%;
    height: 100%;
    overflow: hidden; /*has no effect*/
}

.inner {
    position: absolute;
    top: 50%;
    width: 100px;
}

.left .inner {
    right: 20px;
    text-align: right;
}

.right .inner {
    left: 20px;
    text-align: left;
}

Answer 1

您只是在寻找

visibility: hidden;

或

display: none;

最后一个从DOM中删除元素。

如何隐藏浮动元素的溢出内容

1 个答案: