2011-12-23 3 views
0

에 대한 절대 사업부를 정렬하면 주 divmargin:20%를 사용하는 것이 었습니다 ...하지만 나는 그것이 최선의 방법이라고 생각하지 않습니다내가 무슨 짓을 중심

CSS :

.wrapper { 
    background-color:#F0C; 
    float:left; 
    width:1000px; 
    height:400px; 

    margin-left:20%; 
    alignment-adjust:central; 
    position:absolute; 
} 

.maincontent { 
    background-color:#3F6; 
    float:left; 
    width:50%; 
    margin-left:30%; 
} 

.leftSidebar { 
    background-color:#C63; 
    float:left; 
    width:30%; 
    margin-left:-80%; 
} 

.rightsidebar { 
    background-color:#66F; 
    float:left; 
    width:20%; 
} 

<div class="wrapper"> 
    <div class="maincontent"> 
     <!-- main content goes here --> 
    </div> 

    <div class="leftSidebar"> 
     <!-- left sidebar content goes here --> 
    </div> 

    <div class="rightsidebar"> 
     <!-- right sidebar content goes here --> 
    </div> 
</div> 

HTML은 어떻게 C로 .wrapper를 배치 할 수 있습니다 들어가다? 쉬운 방법이 있습니까?

또한 left/right 특성 및 margin-left/margin-right를 사용 차이는 무엇입니까?

+1

절대 위치 지정을 사용하는 이유는 무엇입니까? 나는 결코 레이아웃 용도로 사용하지 않는다. – ptriek

+0

절대 위치와 고정 위치 사이의 차이점은 무엇이며, 기본 위치는 –

+0

이고 기본값은'static'이다. 이것은 정상적인 블록이나 인라인 요소처럼 동작한다는 것을 의미한다. '고정'은 레이아웃 흐름에서 벗어나 페이지가 스크롤 된 경우에도 브라우저 창에서 정확히 같은 위치에 유지된다는 의미입니다. '절대적'이란 레이아웃 흐름에서 벗어나 다른 레이어에 놓이는 것을 의미하므로 왼쪽/오른쪽/위/아래로 자유롭게 배치 할 수 있으므로 다른 요소 위에 쌓을 수 있습니다. – ptriek

답변

9
.wrapper { 
    width:1000px; 
    position:absolute; 
    left:50%; 
    margin-left:-500px; 
} 
+0

음 ... 대신 퍼센트로 그것을하려고합니다 .. 왜 50 % 왼쪽 필요합니까?!? –

+0

당신은 페이지의 왼쪽에서부터 50 %를 놓고 너비의 절반 뒤로 그것을 움직입니다. 일반적인 방법입니다. – Purag

+0

whyd oes work –

2

내 대답은 다음과 같습니다 절대 위치를 건너 뛰고 콘텐츠 중심을 margin:0 auto;를 사용합니다 (상단과 하단에없는 여백을 자동 이익률은 왼쪽과 오른쪽).

.wrapper 
{ 
    background-color:#F0C; 
    width:1000px; 
    height:400px; 
    margin:0 auto; 
} 
+0

wow..if hte margin이 자동이면 .. div가 중심으로 설정됩니다.하지만 위아래 요소를 사용하고 div를 아래쪽/위쪽으로 가져 오려면 어떻게해야합니까?!? –

+0

나는 완전히 이해하지 못한다. 조금 더 명확하게 설명 할 수 있니? – ptriek

+0

절대 위치없이 어떻게 배치합니까? –

관련 문제