html - グリッド スタイルに似た 3 つの div スタッキング

Question

3 つの div があるとしましょう。DIV1、DIV2、DIV3 がこの特定の順序です。

私はそれらを次のように積み重ねたいと思います:

    (BIG|DIV1
   DIV2)|DIV3

私はポジショニングとフロートを試しましたが、残念ながら、DIV が重なり合ったり、非表示になったり、上下に積み重ねられたりしました。

どんな助けやアドバイスも素晴らしいでしょう。

更新 私の現在のコード:

.div1
{
    position: absolute;
    margin-left: 125px;
    width: 500px;
}

.div2
{
    position: relative; 
}

.div3
{
    clear: both;
}

そして結果：

 (BIG|DIV1
DIV2)|
 DIV3

HTML:

<div class="div1">DIV1</div>
<div class="div2">(BIG <br /> DIV2)</div>
<div class="div3">DIV3</div> 

Answer 1

試したコードを投稿していただけると助かります。あなたが何を望んでいるかを私が理解しているなら、これでうまくいくはずです：

#one {
    clear: both;
    height: 15%;
    width: 40%;
    margin-right: 0px;
    margin-left: auto;
}

#two {
    margin-right: auto;
    margin-left: 0px;
    float: left;
}

#three {
    margin-right: 0px;
    margin-left: auto;
}

Answer 2

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#div1{
  width:200px;
  height: 50px;
  clear: both;
}
#div2{
  width:100px;
  height: 50px;
  float: left;
}
#div3{
  width:100px;
  height: 50px;
  float: left;
}

Answer 3

このソリューションでは、相対的に配置されたラッパーが使用されます。これが利用できることを願っています。

http://jsfiddle.net/LLRR8/2/

#div1 {
    height: 50%;
    position: absolute;
    right: 0;
    top: 0;
    margin-left: 120px;
}
#div2 {
    height: 100%;
    width: 120px;
    position: absolute;
    left: 0;
    top: 0;
}
#div3 {
    height: 50%;
    position: absolute;
    top: 50%;
    right: 0;
    margin-left: 120px;
}
#wrapper {
    position: relative;
}

<div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>