기본 html 레이아웃 질문

Question

나는 상자 모양의 레이아웃을 가진 페이지를 만들려고합니다. 상단 배너는 하단 배너이고, 두 개의 탐색 패널 (왼쪽 및 오른쪽)과 중간에 나타날 텍스트입니다.

이제 테이블을 사용하지 않고 미리 정의 된/하드 코드 된 여백 값없이 뭔가를 만들 수 있는지 궁금합니다.

그럴 수 있습니까? 사전에

감사

마이크

당신은 div의 및 display:table, display:table-row, display:table-cell를 사용하는 테이블과 같은 구조를 구축 할 수 있습니다 당신이 마크 업에 테이블 의미를 남용하지 않습니다

Answer 1

머리말과 꼬리말이 뜻대로라면 3 열 레이아웃의 탄력적 인 탄성을 얻을 수 있습니까?

<div id="top"></div> 
<div id="left"></div> 
<div id="right"></div> 
<div id="middle"></div> 
<div id="bottom"></div> 

을 그리고 CSS : HTML을

#top,#bottom{ 
    width:100%; 
    height:70px; 
    background:silver; 
    clear:both; 
} 
#middle{ 
    background:green; 
} 
#middle,#left,#right{ 
    height: 200px; 
} 
#left,#right{ 
    width: 200px; 
    background:skyblue; 
} 
#left{ 
    float:left; 
} 
#right{ 
    float:right; 
} 

바이올린 : http://jsfiddle.net/hkrVz/

Answer 2

. IE7을 지원해야하는지에 따라 달라집니다. CSS 속성이 IE8에만 도입 된 것으로 생각합니다.

이것이 문제가 될 경우 융통성있는 옵션을 둘러보고 필요한 것을 수행하십시오. 하드 코딩 된 마진이 문제가되는 이유를 정말로 생각할 수 없으므로 더 자세하게 시도하려는 것을 설명해야합니다.