Html 向3列浮动div布局添加响应iframe div类

我是个新手，所以我先道歉！我在我公司的CMS中工作，我尝试使用标签而不是表格来对齐内容，这样它就可以很好地与我们的自适应移动站点配合使用

我正在尝试将youtube视频嵌入到3个分区/列的布局中。我可以使用一个带percentange width的float来获得3个div来正确工作，我可以获得一个youtube嵌入来在它自己的页面上做出反应……但我不能将两者结合起来。我知道我在某个地方有冲突。这是我的密码：

<style type="text/css">
  .embed-box {
    position: relative;
    padding-bottom: 62.25%;
    /* ratio for youtube embed */ padding-top: 30px;
    height: auto;
    overflow: hidden;
  }
  .embed-box iframe, .embed-box object, .embed-box embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style><span style="font-size:18px;"><strong>Lehigh Athletics Department Awards and Achievements</strong></span>
<hr /> <span style="font-size:16px;"><strong>Highlights of 2013-2014 Convocation</strong></span>
<div class="bottom">
  <div style="float: left; width: 33%;">
    <img style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/5/6/ProgramIcon.png" />
  </div>
  <div class="embed-box">
    <div style="float: left; width: 33%;">
      <iframe src="http://www.youtube.com/embed/zQmxGbFbgXc" frameborder="0" allowfullscreen=""></iframe>
    </div>
  </div>
  <div style="float: left; width: 33%;">
    <img style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/5/6/ProgramIcon.png" />
  </div>
</div>

.嵌入框{
位置：相对位置；
垫底：62.25%；
/*youtube嵌入/填充顶部的比率：30px；
高度：自动；
溢出：隐藏；
}
.embed box iframe、.embed box object、.embed box embed{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
Lehigh体育部奖项和成绩
2013-2014年大会亮点

尝试一下这种布局。我重写了你的CSS和HTML。你有太多不适合我的内联内容。这是响应性的，包含Youtube嵌入

---

如果答案对您有效，请使用复选标记对其进行适当标记。感谢您的回复，但不幸的是，在iPhone上查看时，答案会中断。前两个内容区域已堆叠（这很好），但第三个内容区域已完全丢失。我们的网站是自适应的…不是真正的响应。有时候，CMS很好…有时候不是！它是建立在引导框架上的吗？你有这个网站的链接吗？从那里调试可能更容易。我不知道它是否使用引导程序-以下是url：在桌面浏览器上，当我添加代码时，标题图形也有冲突您正在使用EKTRON。。。一个asp.NETCMS。这很难。你有没有试着浏览一下上面的内容，看看他们是否能帮助你。。。他们可能有一个快速修复或母版页/样式表，已经准备好处理您的问题。