javascript - 试图将 div 放在 iframe 旁边

Question

我正在尝试将一个 div(#news 类)放置在 iframe 的右侧，并由另一个 div“sect”包裹。 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