DIV的Pyramind

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; 
}