DIV金字塔

Question

我正在尝试建造一个由4个DIV组成的金字塔。布局如下所示：

     ------
     | #1 |
     ------
----------------
| #2 | #3 | #4 |
----------------

此外，我需要3个额外的DIV，从中心DIV（＃3）开始，另外还包含＃1，＃2或＃3。这些DIV用于稍后使用jQueryUI构建滑动效果。 它应该看起来像＃1，＃2和＃4滑出＃3。

DIV之间的边距应为2像素。我也想让整个街区居中。

即使显示：内联;和位置：绝对;在可见和不可见的DIV上启用我无法正确布局。我使用了一些负边距，当它第一次看起来不错时，我看到我的顶级DIV位于html体外。

我想有一种更简单，更优雅的方式来实现我想要的。

关于这个特定问题或您看到的可以改善我的CSS的各种建议都非常受欢迎。 提前致谢

塞巴斯蒂安

这是我到目前为止所得到的：

HTML：

<div id="centerbox">
    <div id="main">main</div>
    <div id="rail_top">
        <div id="top">top</div>
    </div>
    <div id="rail_left">
        <div id="left">left</div>
    </div>
    <div id="rail_right">
        <div id="right">right</div>
    </div>
</div>

CSS：

#centerbox {
    height: 602px;
    width: 904px;
    margin-top: 640px;
    margin-left: auto;
    margin-right: auto;
}
/* blue */
#main {
    background-color: #33F;
    height: 300px;
    width: 300px;
    margin: 2px;
    z-index: 9999;
    position: absolute;
    display: inline;
    margin-left: 302px;
}
/* green */
#top {
    background-color: #3F0;
    height: 300px;
    width: 300px;
    z-index: 1;
    position: absolute;
    display: inline;
}
/* pink */
#left {
    background-color: #F06;
    height: 300px;
    width: 300px;
    z-index: 1;
}
/* orange */
#right {
    background-color: #FC0;
    height: 300px;
    width: 300px;
    z-index: 1;
    margin-left: 302px;
}
#rail_top {
    height: 602px;
    width: 300px;
    display: inline;
    position: absolute;
    margin-top: -300px;
    margin-left: 302px;
}
#rail_left {
    height: 300px;
    width: 602px;
    float: left;
    position: absolute;
    display: inline;
    margin-top: 2px;
}
#rail_right {
    height: 300px;
    width: 602px;
    float: right;
    position: absolute;
    display: inline;
    margin-left: 302px;
    margin-top: 2px;
}

Answer 1

我可能错过了你想要的一些属性，但试试这个：

<强> HTML：

<div id="wrapper">
    <div class="top">
        top
    </div>

    <div id="bottom-wrapper">
        <div class="rail_left">
            left
        </div>
        <div class="rail_center">
            center
        </div>
        <div class="rail_right">
            right
        </div>
    </div>
    <div class="clear"></div>
</div>

<强> CSS：

#wrapper {
    width: 904px;
    height: auto;
    margin: 640px auto 0 auto;
}
.top {
    margin: 2px auto;
    background-color: yellow;
    height: 300px;
    width: 300px;
}
#bottom-wrapper {
    margin: 0 auto;
    width: 904px;
    height: auto;
}
.rail_left {
    margin: 0 2px 0 0;
    float: left;
    height: 300px;
    width: 300px;
    background-color: red;
}
.rail_center {
    margin: 0 2px 0 0;
    float: left;
    height: 300px;
    width: 300px;
    background-color: blue;
}
.rail_right {
    margin: 0 auto;
    float: right;
    height: 300px;
    width: 300px;
    background-color: green;
}
.clear {
    clear: both;
}