3つのiframeを配置する - 1メイン左/ 2右側を共有 - 1つのトップ、1ボトム

Question

私はコーディングの初心者です。 3つのiframeを画面幅の3/4（1/4はサイドバー）のボックスに配置したいのですが...それが関連しているかどうかはわかりません。

3つのiframeが左側に大きなもの（ボックスの50％、高さ100％を使用）と右側を共有する2つのものを共有するようにしたい - 1つは底部に（=右側のボックスの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>