Question

我在我的浮动布局中嵌入了一个YT视频（iframe），它打破了浮动。正确的div完全从视图中消失。

它的布局简单：

|内容|离开|中间|对| / content |

HTML

<div id="container">
<div id="content">
    <div id="left"></div>
    <div id="middle">
        <iframe id="ytplayer" type="text/html" width="200" height="180" src="http://www.youtube.com/embed/CTAud5O7Qqk?autoplay=1" frameborder="0" />
    </div>
    <div id="right"></div>
</div>

CSS

#container {
width: 100%;
background-color: gray;
height: 200px;
}
#left {
width: 25%;
height: 190px;
background-color: green;
float: left;
}
#middle {
height: 190px;
width: 50%;
background-color: purple;
float: left;
}
#right {
width: 25%;
height: 190px;
background-color: orange;
float: left;
}
#content {
width: 80%;
height: 200px;
margin: auto;
}

Answer 1

您尚未使用所需的</iframe>

正确关闭iframe

http://jsfiddle.net/David_Knowles/vkhse/

Answer 2

您的标记存在一些问题：

<iframe>未正确关闭。
#container div未关闭（但可能是您没有复制最后一行）。
type的{{1}}属性不存在。
不推荐使用<iframe>属性：使用CSS。

如果您需要嵌入YT视频，只需点击分享，然后点击视频下的嵌入式HTML。

Answer 3

对于任何即使使用结束标记仍然存在问题的人，请尝试在标记之间粘贴一些内容，例如：<iframe> </iframe>

（为我工作。）

如何在不破坏浮动布局的情况下嵌入iframe？

3 个答案: