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/

要设置和高度和宽度，请确保显示：block，然后可以应用溢出=）

Does height and width not apply to span?

溢出隐藏不起作用

1 个答案: