css - 2 つの div がある列と 1 つの div がある列

Question

別の div の上に 1 つの div を配置し (両方の正方形は 10x10 です)、10x20 の div を持つ別の列を作成するには、css に何を入れますか?

少し簡単に言い換えると、20x20 の大きな正方形が 1 つ必要です。その形状の左半分には、2 つの 10x10 の正方形が必要です。右側には、10x20 の div が必要です。

クラスのためにこれが必要なのを手伝ってください

Answer 1

css のpositionプロパティを使用して要素を絶対的に配置し、上と左の座標を設定できます。ボックスのサイズを変更するには、heightおよびプロパティも使用する必要があります。width

Answer 2

たぶん、このようなものですか？

<div id="bigBox">
     <div class="leftBox"></div>
     <div class="leftBox"></div>
     <div id="rightbox">
</div>

<style>
    #bigBox { position: relative; width: 20px; height: 20px;}
    .leftBox {position: absolute; left: 0; height: 10px; width: 10px; }
    .rightBox {position: absolute; right: 0; width: 10px; height: 20px;}
</style>