Javascript 在iframe循环中显示URL

我有一个iframe循环

if ( query.length > 0) {
            $("#iframes-container").empty();
            for (var i = 0; i < query.length; i++) {
                var result = query.results[i];
                $("<iframe />", {
                    name: 'myFrame',
                    id:   'myFrame',
                    src: result.url,
                    width: 1024,
                    height : 650
                }).appendTo('#iframes-container');

}

它在特定的iframe下显示url，但是设计也会出错，因为iframe不再彼此相邻显示，而是一个在另一个下显示

那么，我如何在iframe下获得url，并且仍然让iframe彼此相邻

---

感谢使用dom制作的float容器在div中同时包含iframe和p或span

HTML:

完整的基本代码：

---

我建议使用浮动div容器类来包装所有内容。对每个单元重复这个模块。我也想到了一个容器，但是对JavaScript来说有点陌生，所以我真的不知道如何实现这个。你能给我看看吗？谢谢。答案添加到下面的小提琴链接

$("<span>"+result.url+"</span>").appendTo('#iframes-container');

span {

display: block;

    <div id="iframes-container" class="clearfix"></div>

for (var i = 0; i < 2; i++) {
    $("<div />", { class: 'floater', id: 'div_'+i}).appendTo('#iframes-container');
    $("<iframe />", {  width: 1024, height : 200, id: 'iframe_'+i, src: 'http://jsfiddle.net' }).appendTo('#div_'+i);
    $("<p>result line</p>").appendTo('#div_'+i);
}

#iframes-container { border: 1px solid #444; padding: 5px; }
.floater { float: left; width: 150px; height: 350px; border: 1px solid #333; overflow: scroll; }

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}