排列3个内嵌框架 - 1个主左侧/ 2个右侧共享 - 一个顶部，一个底部

我是编码方面的新手，并且只是提供了迄今为止的基础知识。我想在一个3/4的屏幕宽度（1/4是侧边栏）的框中安排3个iframe ......不知道这是甚至相关的。排列3个内嵌框架 - 1个主左侧/ 2个右侧共享 - 一个顶部，一个底部

我想让3个iframe共享左侧有一个大的盒子（使用盒子的50％，但是高度为100％）和另外两个分享右侧的盒子 - 一个在顶部，一个放在底部（=右边分享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>

如果有人可以帮助我，这将是可怕的！

谢谢！

来源

2017-02-19 Drea

这是你在找什么？

.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>

来源

2017-02-20 12:15:08

排列3个内嵌框架 - 1个主左侧/ 2个右侧共享 - 一个顶部，一个底部

回答

相关问题