blueprint css를 사용하여 행 (또는 div)을 세로로 정렬하는 방법은 무엇입니까?

Question

나는 (주어진 순서대로) 다음 HTML 코드

<div id="content">...</div> 
<div id="footer">...</div> 
<div id="header">...</div> 

그리고 물론

, 나는 콘텐츠 부분 뒤에 다음 글 다음 상단의 헤더 부분을 표시 할 수 있습니다. 청사진을 사용하여 CSS 코드로 어떻게 할 수 있습니까?

P. : 콘텐츠 부분은 처음에는 더 많은 서구 친화적 인 콘텐츠로 작성됩니다.

EDIT : 솔루션은 div 섹션이 작성된 순서대로 작동해야합니다. 예를 들어 div "content"는 div "footer"다음에 XHTML 파일에 쓰여질 수 있지만 내용 아래에 내용이 표시되지 않으므로 내용 아래에 꼬리말이 표시됩니다.

Answer 1

청사진에서이 기능을 제공하는지는 잘 모르겠습니다. 그러나 그것은 간단한 CSS로 쉽게 할 수 있습니다.

헤더의 높이가 100px로 고정되어 있다고 가정합니다.

#header { 
    height:100px; 
    position: absolute; 
    top: 0px; 
} 

#content{ 
    padding-top:100px; 
} 

업데이트 :

그냥 발견이 비슷한 질문 :

• CSS layout, use CSS to reorder DIVs
• CSS positioning div above another div when not in that order in the HTML

그들은 내 답변으로 기본적으로 동일하다 (div의 상부 높이가 알려져있다 JS를 사용하여 순서를 재 지정하십시오.

Answer 2

페이지에서 원하는 위치에 배치하려면 절대 위치 지정을 사용하고 모든 div에서 차단할 수 있어야합니다.

예를 들어, 코드를 가지고 :

<div id="foo"></div> 
<div id="bar"></div> 

바 푸 위에 표시하기 위해, foo는이 100 픽셀 인 경우, 다음을 사용 :

#bar{ 
    top:100px; 
    left:0px; 
    position:absolute; 
    display:block; 
}