테이블 페이지 레이아웃의 CSS 버전

CSS를 배우려고합니다. 지금까지 나는 페이지 레이아웃을 관리하기 위해 뒤쳐져 테이블을 사용하고있었습니다.테이블 페이지 레이아웃의 CSS 버전

저는 CSS로 마이그레이션하고 싶지만이 문제를 안고있는 몇 가지 문제가 있습니다.

테이블을 사용하여 나의 현재 페이지 레이아웃 : enter image description here

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <title>page layout</title> 
    <style type="text/css"> 

     html, body { 
      text-align:center; 
     } 

     #wrapper {  
      margin: 0 auto;  
      width: 1200px; 
      text-align:left;} 

     #header { 
      height: 100px; 
      overflow: auto; 
      background: green; 
     } 

     #main { 
      background: yellow; 
      float: left; 
      width: 800px; 
      height: 400px 
     } 

     #menu { 
      background: red; 
      float: left; 
      width: 200px; 
      height: 200px 
     } 

     #pics { 
      background: brown; 
      float: left; 
      width: 200px; 
      height: 200px 
     } 
     #pics { 
      background: brown; 
      float: left; 
      width: 200px; 
      height: 200px 
     } 
     #adverts { 
      background: pink; 
      float: left; 
      width: 200px; 
      height: 400px 
     } 

     #footer { 
      background: grey; 
      float: left; 
      width: 1200px; 
      height: 100px 
     } 


    </style> 

</head> 
<body> 
<div id="header"> 
    Header 
</div> 

<div id="menu"> 
    menu 
</div> 
<div id="pics"> 
    pics 
</div> 
<div id="main"> 
    main 
</div> 

<div id="adverts"> 
    adverts 
</div> 

<div id="footer"> 
    footer 
</div> 

</body> 
</html>

이 다음과 같은 출력을 생성합니다

enter image description here

나는 아래의 코드에 따라 CSS를 사용하여 레이아웃을 다시 시도

사진 div가 잘못된 위치에있는 것을 보면 알 수 있듯이 전자 메뉴 div는 페이지 하단에 있지 않습니까?

제 질문 사항, 올바른 위치에 사진 div를 얻으려면 어떻게해야합니까? 두 번째로 전체 페이지의 중심을 어떻게 정합니까?

마지막으로 페이지 레이아웃을 관리하는 가장 좋은 방법입니까? 내 '주요'div가 너무 많은 정보로 가득 차게되면 어떻게 될까요? 모든 정보를 표시하기 위해 높이를 자동 조정합니까? 이것이 오버플로 : 자동이 허용하는 것입니까?

는

출처

2012-09-15 Smudger

몸을 감싸기 위해 div가 필요합니다 (메뉴, 사진, 주, 광고). CSS 격자 프레임 워크를 살펴보십시오. http://960.gs/ –

부트 스트랩 사용을 고려해야합니다. – chovy

귀하의 pics DIV 순서를 벗어 R, 항상 도움을 주셔서 감사합니다. 그것은 footer 사업부에 출석 할 필요가 :

<div id="footer"> 
    footer 
</div> 

<div id="pics"> 
    pics 
</div>

당신이이 필요합니다 :

당신이이

menu 및 pics div의 길을 배열 얻기 위하여

<div id="pics"> 
    pics 
</div> 

<div id="footer"> 
    footer 
</div>

둘 다 (아래 CSS/HTML에 menupics)를 랩핑 (포함)하는 div을 만듭니다. 나는 전체 페이지를 중심으로 어떻게

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <title>page layout</title> 
    <style type="text/css"> 

     html, body { 
      height: 100%; 
      width:1200px; 
      text-align:center; 
     } 

     #header { 
      height: 100px; 
      overflow: auto; 
      background: green; 
     } 

     #main { 
      background: yellow; 
      float: left; 
      width: 800px; 
      height: 400px; 
     } 

     #menupics { 
      float: left; 
      width: 200px; 
      height: 400px; 
     } 

     #menu { 
      background: red; 
      float: left; 
      width: 200px; 
      height: 200px; 
     } 

     #pics { 
      background: brown; 
      float: left; 
      width: 200px; 
      height: 200px; 
     } 

     #adverts { 
      background: pink; 
      float: left; 
      width: 200px; 
      height: 400px; 
     } 

     #footer { 
      background: grey; 
      float: left; 
      width: 1200px; 
      height: 100px 
     } 


    </style> 

</head> 
<body> 

<div id="header"> 
    Header 
</div> 

<div id="menupics"> 
    <div id="menu"> 
    menu 
    </div> 
    <div id="pics"> 
    pics 
    </div> 
</div> 

<div id="main"> 
    main 
</div> 

<div id="adverts"> 
    adverts 
</div> 


<div id="footer"> 
    footer 
</div> 

</body> 
</html>

출처

2012-09-15 22:37:40

감사합니다 켄, 완벽하게 작동하고 페니 마침내 떨어졌다. 언제나처럼 고마워. 정말 고마워. – Smudger

:

이 코드는 당신이 위에 배치 한 것처럼 작동?

당신은 당신 주변에 폭 다음과 같은 CSS 규칙이 다른 div의 사업부를 넣어하는 것이 좋습니다

: margin: 0 auto 0 auto;합니다.

내 페이지 레이아웃을 관리하는 가장 좋은 방법입니까?

당신의 HTML은 나쁘지 않지만 CSS가 너무 많이 지정합니다. CSS 기반 레이아웃을 사용하면 실제로는 더 적습니다. 가능한 경우에 너비와 높이를 지정하지 마십시오.

위의 섹션에서 다른 div를 래핑하는 div를 추가하여 페이지를 가운데에 맞출 수 있다고 언급했습니다. 그 div에 할당 된 너비가 필요하므로 중심에 배치 할 수 있지만 너비를 지정하지 않으면이 래퍼 내의 div에 대해 블록 레벨 요소이므로 사용 가능한 공간을 자동으로 채 웁니다. 또한 높이를 지정하지 않으면 그 높이를 차지합니다. 따라서 자동으로 커지려면 높이를 지정하면 안됩니다. 마지막으로 div가 최소 높이를 차지하고 최대 높이보다 커지지 않게하려면 min-height 및 max-height CSS 규칙이 있습니다 (이러한 규칙은 일부 레거시 브라우저에서 작동하지 않음).

내 작품이 이미지 호스트를 차단하므로 다른 질문에 답변 할 수 없음) =.

출처

2012-09-15 22:54:57 Adrian

테이블 페이지 레이아웃의 CSS 버전

답변

관련 문제