css - div 内部的 iframe 搞乱了父 div 中的其他 div

Question

所以我有这样的布局：

<--------------------------------parent div------------------------------------->
<---div1---><---------------div2----------------><-------------div3------------->

当我将 iframe 添加到 div3 时，它将 div 2 向下移动到 iframe 高度的正下方，同时保持 div1 相同，因此

<--------------------------------parent div------------------------------------->
<---div1--->                                     <-------------div3------------->
                                                                 <-
                                                             iframe height
                                                                 ->
             <---------------div2---------------->

我该如何解决？这是我的 div 代码：

<style>
div {padding:5px;}
#frame {width: 400px;height:800px;border: none;-moz-transform: scale(0.9);
    -moz-transform-origin: 0 0;-o-transform: scale(0.9);-o-transform-origin: 0 0;
    -webkit-transform: scale(0.9);-webkit-transform-origin: 0 0;
}
</style>
<div>
     <div style="float:left; width:16.5% ">.... </div>
     <div style="display:inline-block;width:30%; ">....</div>
     <div style="display:inline-block; width:28.5%; "> <iframe> </iframe></div>
</div>
<div style="clear:both "></div>

Answer 1

添加margin: 0; padding: 0; float: left到div和#frame。