配置要素

Question

私はそうのようなHTMLマークアップの構造を有する：

<div class="container> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div id="three"></div> 
</div> 

を私は、ディスプレイフレックス行にこのマークアップを形成しようとしています。 div 1は線幅の半分を占め、残りのdivは線幅の残りの半分を取るが、div 1と同じ行にお互いの上に積み重ねられる。

おそらくdivで2と3を折り返して、私が探しているデザインを実行する必要があることを私は認識しています。私は別のdivにdiv 2と3をラップせずにそうすることが可能かどうか疑問に思っています。

ありがとうございます！ .container { display: flex; flex-direction: row; }

を次に、あなたは2と3の両方のラッパーを作成し、彼を与える：
.wrapper { display: flex; flex-direction: column; }あなたは別のdiv、簡単な例それはあなたのコンテナを与えることになるためでそれらをラップする必要があります

Answer 1

これは最も基本的なことですが、もちろん他のものを変更する必要があります。

Answer 2

あなたはグリッドでそれを行うことができます。

.container { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr; /* makes two columns, can also use 50% 50%, repeat(2, 1fr) or repeat(2, 50%), fr stands for fractions */ 
 
} 
 

 
#one { 
 
    grid-row: 1/3; /* spans two rows */ 
 
}

<div class="container"> 
 
    <div id="one" style="background:red"><p style="height:100px">Test content ...</p></div> 
 
    <div id="two" style="background:green"></div> 
 
    <div id="three" style="background:blue"></div> 
 
</div>

そして、それhereについての詳細を学びます。