gpt4 book ai didi

嵌入 Vimeo 的 CSS3 列 = 空白

转载 作者:太空宇宙 更新时间:2023-11-03 18:48:04 24 4
gpt4 key购买 nike

如果我设置一个使用 CSS3 列的布局,并尝试在该布局中嵌入一个 Vimeo iframe,它会显示为一个黑框。

这里有一个 fiddle 来说明我的意思:http://jsfiddle.net/tMyfa/

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
body {
-webkit-column-count: 3;
-webkit-column-gap: 2em;
}
</style>
</head>
<body>
<body>
<p>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam.<p>
<p>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam.<p>
<p>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam.<p>
<p>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam.<p>
<p><iframe src="http://player.vimeo.com/video/4716148" width="300" height="169" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></p>
<p>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam.<p>
</body>
</html>

如果将列数设置为 1,问题就会消失。

有没有人对这个问题有任何见解?

这是一个更新的 fiddle ,可以更好地显示问题:http://jsfiddle.net/t7AP7/

最佳答案

删除

.post_content iframe {
width: 100% !important;
height: 200px !important;
}

然后尝试像这样在 iframe 上设置宽度:

    <iframe src="http://player.vimeo.com/video/62257681" 
width="250" height="150" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>

关于嵌入 Vimeo 的 CSS3 列 = 空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15770355/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com