Question

我得到了这个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');

效果很好。但是如果我是广告

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

显示网址，它始终显示在iframe右侧，并且与我的设计混淆。

所以我添加了

span {

display: block;

}

显示特定iframe下的网址，但之后设计也搞砸了，因为iframe不再显示在彼此旁边，而只有一个在另一个之下。

那么如何获取iframe下的网址并仍然让iframe放在彼此旁边呢？

感谢

Answer 1

使用dom-made浮动容器来包含div中的iframe和p（或span）。

HTML：

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

JS：

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);
}

CSS：

#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%;
}

完整的基本代码： http://jsfiddle.net/L3bg1w10/1/

在iframe循环中显示URL

1 个答案: