Question

我试图在另一个div'sect'包装的iframe的右侧放置一个div（类#news）。 iframe在#sect中正确显示，但是当我将#news放在float：right属性中时，它就不会显示它。

在firefox浏览器上，当我使用F12检查内容时，整个#news将被遗漏，并且永远不会显示在网页上。

顺便说一下，当我在firefox浏览器上查看时，＃sect的高度为0px。 iframe的高度是使用javascript动态设置的，具体取决于页面内部的高度。 #sect位于导航栏下方。我挣扎了好几天仍然没有解决方案..

这是我的代码。

提前致谢

function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + 100 + "px";
}

#sect
{
    max-width:1000px;
    min-width:100px;
    width:100%;
    position:relative;
    z-index:-1;
    margin:auto;
}

#sect iframe
{
    max-width:750px;
    min-width:75px;
    width:100%;
    position:relative;
    display:inline;
    float:left;
    border: none;
    box-shadow: 6px 6px 3px #888888;
    border-radius: 10px;
    padding: 10px;
    background-color:#fff;
}
#sectnews
{
    position:relative;
    background-color:#fff;
    float:right;
    width:200px;
    z-index:55;
}

#news p
{
    font-size:10px;
    display: block;
    width:200px;
    float:right;
}

<div id="sect">
    <iframe name="frame" src="IndexFrame.html" width="100%" onload="resizeIframe(this)"/>
    <div class="news"> 
        <p>News and Upcoming Events</p>
        <p>First News</p>
        <p>Second News</p>
    </div>
</div>

Answer 1

您需要更正iframe

的结束标记

<iframe name="frame" src="IndexFrame.html" width="100%" onload="resizeIframe(this)"></iframe>

<强> DEMO

试图将div放在iframe旁边

1 个答案: