html - 三个类似网格样式的div堆叠

Question

假设我有三个 div:DIV1、DIV2、DIV3 是这个特定的顺序。

我想像这样堆叠它们:

    (BIG|DIV1
   DIV2)|DIV3

我已经尝试过定位和 float ，不幸的是 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

此解决方案采用相对定位的包装器。我希望这对你可用。

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>