Question

我正在尝试将响应式youtube视频添加到我的帮助文件中，但视频不包含在父div中并溢出它。我在这里尝试了一些修复，但似乎都没有。我想知道是否有人可以指出我正确的方向。我在这里可以看到一个例子：http://designasticker.com.au/help.php您需要使用以下用户名和密码来查看页面：

用户名：贴纸密码：al765bd

Answer 1

EDIT

添加负边距：

margin: -120px;

并在iframe中调整视频大小：

<iframe width="YOUR INPUT" height="YOUR INPUT" src="//www.youtube.com/embed/-JWT_tC8_iE" frameborder="0" allowfullscreen></iframe>

将“YOUR INPUT”替换为自定义的宽度和高度。

Answer 2

嗯，这只是一个浮动问题。浮动元素时，将它们从文档流中取出 - 这意味着父级不再确认浮动子级是否存在。

您可以通过向父级添加:: after伪元素来解决此问题，在本例中为.displayScreen-row：

.displayScreen-row:after { clear: left;
    display: block;
    height: 0;
    visibility: hidden;
    content: ' '; }

这适用于符合标准的浏览器，但不适用于IE 6或7.对于这两种浏览器（使用条件注释仅针对那些浏览器），您需要像这样解决方法：

IE 6：

.displayScreen-row { height: 100%; }

IE 7：

.displayScreen-row { min-height: 100%; }

IE 6和7错误地允许设置高度来确认浮动的孩子。

css浮动元素不包含在父div中

2 个答案: