Question

我在同位素布局中在div中定位iframe时遇到了问题。

编辑在此处查看示例：http://beektest.co/index_test.html（点击其中一个白色div，其中包含图片和文字以打开iframe）

基本上，iframe出现在div的一半，并且位于同位素元素的后面。

我已将div设置为高度450，但是当iframe加载时，它似乎缩小到一半，而iframe与div重叠。

有关如何强制iframe到div顶部的任何线索，并停止调整div的大小？

以下是代码：

        $("#container").append('<div id="item_'
                    + v.id + '" class="item"><a href="http://site.co/guide/'
                    + v.id + '--'
                    + urltitle + '"><img id="img_'
                    + v.id + '" src="http://cdn.site.co/' 
                    + v.thumbName + '" "width="200" height="200" /></a><p id="p_'
                    + v.id + '" align="center">' 
                    + desc + '</p></div>');

                $('#item_'
                + v.id + '').click(function(){
                    $(this).css('width','100%');
                    $('#img_'
                    + v.id + '').css('visibility','hidden');
                    $('#p_'
                    + v.id + '').css('visibility','hidden');

                    $(this).append('<iframe id="iframe" src="http://site.co/g'
                        + v.id + '"></iframe>');

                    var $container = $('#container');
                    $container.isotope('reLayout');

                    setTimeout(function() {
                        var position = $('#item_'+ v.id + '').position();
                        scroll(0,position.top);
                        $container.isotope('reLayout');
                    },1000);
                });

这是CSS

iframe
{
    width: 100%;
    height: 450px;
    top: 0px;
    left: 0px;
    display: block;
    border: 0;
    height: 450px;
    width: 100%;
    position: absolute;
}

.item {
    width: 200px;
    border: 1px solid;
    background-color: #FFFFFF;
     margin-right:10px;
     padding-right:10px;
     padding-top:10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
     border-radius: 5px;
     background: -webkit-gradient(linear, rgba(255,255,255,1) 0%,rgba(0,0,0,0.2) 100%);
     z-index: 1001;
}   

.large{
width: 600px;
height: 450px;
position: absolute;
}

Answer 1

谢谢你的期待。

CSS未在更新时调用，我在其他地方手动覆盖它。

谢谢你的期待。

同位素布局中的动态iframe高度

1 个答案: