iframe似乎打破了css布局

Question

谁能说为什么这是错误的？ 我认为黄色的div会像粉红色的div一样遍及整个页面。 但是，当我看它时-不，黄色div排列在图片下方，而不是整个长度。

<div style=width:100%;background:pink>
    fjadlskjfdsf dslkfsda sdjkfh
</div>
<div style=width:100%;background:red>
    <div style=width:60%;float:left>
        <img src=Library_left.jpg width=100%>
    </div>
    <div style=width:40%;float:right>
        <iFrame scrolling="no" frameborder="0" width="100%" height="100%" src="https://silib2.net/eResources/scripts/carousel/carousel.php">&nbsp;</iFrame>
    </div>
</div>
<div style=width:100%;background:yellow>
    <h1 style=text-align:center>adslkjfasdlkjf</h1>
why is this div not wider?
</div>

（ https://silib2.net/eResources/scripts/carousel/form.htm ）

这可能是愚蠢的吗？

Answer 1

请尝试：

<div style=width:100%;background:pink>
    fjadlskjfdsf dslkfsda sdjkfh
</div>
<div style="width:100%;background:red; clear: both; overflow: hidden;">
    <div style=width:60%;float:left>
        <img src=Library_left.jpg width=100%>
    </div>
    <div style=width:40%;float:right>
        <iFrame scrolling="no" frameborder="0" width="100%" height="100%" src="https://silib2.net/eResources/scripts/carousel/carousel.php">&nbsp;</iFrame>
    </div>
</div>
<div style="width:100%;background:yellow; clear: both; overflow: hidden;">
    <h1 style=text-align:center>adslkjfasdlkjf</h1>
why is this div not wider?
</div>

Answer 2

Iframe的静态高度可能会解决您的问题

<iframe scrolling="no" frameborder="0" width="100%" height="165px" src="https://silib2.net/eResources/scripts/carousel/carousel.php">&nbsp;</iframe>

Answer 3

您需要为iframe设置一个较小的高度，该高度大约为

    height: 225px;

并且您需要给div包裹一下它[上面有红色背景的那个]

  clear:both; Overflow:hidden;