隐藏的溢出不起作用

Question

我有这个代码， http://jsfiddle.net/rnbcoder/WjzbH/

HTML：

<div class="mframes">
    <div class="mframe" id="liveBand">
            <div class="mframeDetails mfrDetSum" style="background-color: rgba(255,0,0,0.5);">
                    <p>Live Band Performance</p>
                    <p>Stay tuned for more details</p>
                    <div class="mframeBtn" id="leftmframeBtn" style="">Read More</div>
            </div><div class="mframeDetails mfrDetFull" style="left:50%;background-color: green;">
                    <p>This is the main interesting blah blah </p>
            </div>
    </div><div class="mframe" id="dj">
            <div class="mframeDetails mfrDetFull" style="left:0%;background-color: green;">

            </div><div class="mframeDetails mfrDetSum" style="left:50%;background-color: rgba(255,0,0,0.5);">
                <div class="mframeBtn" id="rightmframeBtn" style=""></div>
            </div>
    </div>
</div>

CSS：

.mframes{
    position:  absolute;
    height:70%;
    width:70%;
    margin-top: -18%;
    margin-left: -35%;
    top: 50%;
    left: 50%;
    white-space: nowrap;
    overflow: hidden;
}
.mframe{
    margin: 0;
    height: 100%;
    width: 50%;
    background-color: black;
    overflow: hidden;
}
.mframeDetails{
    position: absolute;
    display: inline-block;
    height: 100%;
    width: 50%;
    text-align: center;
}

.mframe包含的div大于其自身。 其溢出样式设置为隐藏。 但是它不能修剪孩子。

怎么了 ？

Answer 1

取消职位：绝对； ？ 您是在JS中设置顶部还是左侧，或者它们是相对的？

高度和宽度都可以是％，而不是数字。 我会为你玩一点。

编辑：下面，我想我找到了。

在您发布的jsfiddle链接中，从此类中删除以下行。

display: inline-block;

.mframe{
    margin: 0;
    height: 100%;
    width: 50%;
    background-color: black;
    overflow: hidden;
}

http://jsfiddle.net/WjzbH/9/

要设置高度和宽度，请确保您处于display：block状态，然后可以应用溢出=）

高度和宽度不适用于跨度吗？