我在浮动布局中嵌入了一个 YT 视频(iframe),它破坏了浮动。右 div 完成从视图中消失。
它是一个简单的布局:
|内容| 离开 | 中间 | 对 | /内容 |
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;
}