DIV의 피라미드

Question

4 개의 DIV로 구성된 피라미드를 만들려고합니다. 레이아웃은 다음과 같다 :

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

더욱이 I 중심 DIV (# 3)과 어느 함유 # 1, # 2, # 3에 추가로 개시 3 개 추가 된 DIV 필요하다. 이 DIV는 나중에 jQueryUI로 슬라이딩 효과를 만드는 데 사용됩니다. # 1, # 2, # 4가 # 3에서 벗어나는 것처럼 보입니다.

DIV 사이의 여백은 2 픽셀이라고 가정합니다. 또한 전체 블록을 중앙에 배치해야합니다.

표시가있는 경우에도 : 인라인; 및 위치 : 절대; 보이는 DIV와 보이지 않는 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; 
}