css - DIV 金字塔

Question

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

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

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

DIV 之间的边距应该是 2 个像素。我还希望整个 block 居中。

即使有 display: inline;和position:absolute；在可见和不可见的 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;
}