排列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個右側共享 - 一個頂部，一個底部

回答

相關問題