html - 将响应式 iframe div 类添加到 3 列 float div 布局

Question

我是新手所以我先道歉!我在我公司的 CMS 中工作，我正在尝试使用标签而不是表格来对齐内容，以便它与我们的自适应移动网站配合得很好。

我正在尝试在 3 div/列布局中嵌入 YouTube 视频。我可以使用具有百分比宽度的 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>

Answer 1

试试这个布局。我重写了你的 CSS 和 HTML。你有太多不适合我的内联内容。这是响应式的并且包含 Youtube 嵌入。

CodePen