Question

我是编码的新手，到目前为止只掌握了基础知识。我想在一个宽度为3/4的方框中安排3个iframe（1/4是侧边栏）...不确定这是否相关。

我希望3个iframe共享左侧有一个大的框（使用50％的框，但高度为100％）和另外2个共享右侧的框 - 一个在顶部，一个在底部（=分享右侧框的50％，每个框的高度为50％）。

我从另一个人那里接过了这个项目，这是他们使用的代码，但它没有适当调整到不同的屏幕尺寸。

    <div style="margin: 0 -15px;">
    <div class="fusion-two-third fusion-layout-column alignleft video-left-content" style="padding: 0 15px;"><iframe src="https://www.youtube.com/embed/GfYl-aUr4OU" width="100%" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
    <div class="fusion-one-third fusion-layout-column alignright video-right-content" style="margin: 0; padding: 0 15px;"><iframe src="https://www.youtube.com/embed/5njYzmU_UtQ" width="100%" height="152" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    <div class="fusion-one-third fusion-layout-column alignright video-right-content" style="margin: 0; padding: 0 15px;"><iframe src="https://www.youtube.com/embed/UcGv7lrperw" width="100%" height="152" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
    </div>
    </div>

如果有人可以帮我解决这个问题会很棒！

谢谢！

Answer 1

这就是你在寻找什么？

.section {
  height: 480px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

fusion-two-third {
  order: 1;
  width: 50%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.fusion-one-third {
  height: 50%;
  margin: 0;
  padding: 0;
}
.fusion-one-third.one { order: 2; }
.fusion-one-third.two { order: 3; }

<div class="section" style="margin: 0 -15px;">
    <div class="fusion-two-third fusion-layout-column alignleft video-left-content" style="padding: 0 15px;"><iframe src="https://www.youtube.com/embed/GfYl-aUr4OU" width="100%" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
    <div class="fusion-one-third one fusion-layout-column alignright video-right-content" style="margin: 0; padding: 0 15px;"><iframe src="https://www.youtube.com/embed/5njYzmU_UtQ" width="100%" height="152" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
    <div class="fusion-one-third two fusion-layout-column alignright video-right-content" style="margin: 0; padding: 0 15px;"><iframe src="https://www.youtube.com/embed/UcGv7lrperw" width="100%" height="152" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
    </div>

排列3个iframe - 1个左边/ 2个共享右边 - 一个顶部，一个底部

1 个答案: