html - スパンを相互に配置する

Question

コンテナーにラップされた 3 つのスパン要素があります。最初のスパンを他の 2 つのスパンの 2 倍の高さにし、左にフロートさせます。他の 2 つは、最初の 1 つのすぐ左にある必要があります。ただし、異なる行で、垂直方向に同じ高さになるようにします。私は多くの異なるアプローチを試みましたが、これを機能させることができません。どうすればこれを達成できるか、誰にもわかりませんか？

<div id="wrapper>
  <span id="span1>text1</span>
  <span id="span2>text2</span>
  <span id="span3>text3</span>
</div>

Answer 1

私があなたのために作った例を見てください

サイズを制御するだけでなく、すべての内側スパンを左にフロートさせる必要があります。

div{width:200px;height:200px;border:solid 1px black}
#s1{float:left;background:red;width:50%;height:100%;}
#s2{float:left;background:green;width:50%;height:50%;}
#s3{float:left;background:yellow;width:50%;height:50%;}