Question

我目前正在开发嵌入式媒体（twitter，Instagram等）的马赛克网页布局。

它有3列，填充div设置为display：none;使用PHP和MYSQL。

一旦填充了div，我就使用了Javascript函数showPost（）;显示内容。当用户滚动到页面底部时，showPost（）;再被召唤以取消隐藏下一个div。

我遇到嵌入式媒体的间距问题，我无法找到解决方法。

我已经创建了一个问题的JSFiddle。

我已经尝试了所有内容，填充，边距，行高，都设置为零。

我无法弄清楚这个额外间距来自哪里？任何帮助将不胜感激。

#column{
    position: absolute;
    padding: 0;
    margin: 0;
    width: 500px;
    line-height: 0;
}
#div01{
    position: relative;
    display: none;
    padding: 0;
    margin: 0;
    line-height: 0;
    background-color: blue;
}
#div02{ 
    position: relative;
    display: none;
    padding: 0;
    margin: 0; 
    line-height: 0;
    background-color: blue;
}
#div03{ 
    position: relative;
    display: none;
    padding: 0;
    margin: 0; 
    line-height: 0;
    background-color: blue;
}

Answer 1

Twitter小部件iframe会自动为内容创建margin: 10px 0px;。要删除此代码，只需将iframe {margin: 0 !important}添加到您的css文件就足够了。

Working demo

#column{
    position: absolute;
    padding: 0;
    margin: 0;
    width: 500px;
    line-height: 0;
}
#div01{
    position: relative;
    display: none;
    padding: 0;
    margin: 0;
    line-height: 0;
    background-color: blue;
}
#div02{ 
    position: relative;
    display: none;
    padding: 0;
    margin: 0; 
    line-height: 0;
    background-color: blue;
}
#div03{ 
    position: relative;
    display: none;
    padding: 0;
    margin: 0; 
    line-height: 0;
    background-color: blue;
}
iframe{margin:0 !important;}

Answer 2

问题是由twitter小部件添加iframe，并在html元素（<iframe stlye="margin-top:...）中设置了边距。您可以使用一些javascript来解决这个问题，以便在添加iframe时检查它们并删除它们的边距。

$(document).ready(function(){
    showPost();

    $('body').on('DOMNodeInserted', 'iframe', function () {
        $('iframe.twitter-tweet').css({
             'margin-top': '0',
             'margin-bottom': '0'
        });
    });
});

jsfiddle

摆脱嵌入式媒体的额外间距？

2 个答案: