Question

我是新手，所以我在前面道歉！我正在为我公司的CMS工作，我尝试使用标签而不是表来对齐内容，因此它适用于我们的自适应移动网站。

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

将响应式iframe div类添加到3列浮动div布局

1 个答案: