Question

我们只说我有三个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

<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 2

如果你发布了你尝试过的代码，它会有所帮助。如果我理解你想要什么，那就应该这样做：

#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 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>

三个div堆叠类似于网格样式

3 个答案: