간단한 CSS HTML 레이아웃 문제

CSS 레이아웃에 중심 맞춤 콘텐츠, 간단한 이미지 헤더, 두 개의 열 (nav 및 주요 콘텐츠) 및 그 아래에 바닥 글을 작성하는 데 문제가 있습니다.간단한 CSS HTML 레이아웃 문제

문제는 브라우저 창을 조작 할 때 nav/main 콘텐츠 열을 크기 (각각 200 및 718px)로 유지하고 머리글/바닥 글의 가운데 위치를 유지할 수 없다는 것입니다.

다양한 유형의 위치 지정 및 컨테이너를 사용해 보았습니다. nav/main 열을 부동 상태로 만들면 컨테이너에서 항상 분리됩니다.

아이디어가 있으십니까?

CSS :

body { 
    text-align: center; 
    margin: 0px 0px; 
    padding: 0px; 
    background-color: #FFFFFF; 
    font-family: Tahoma, Arial, sans-serif; 
} 

.header { 
    max-width: 918px; 
    margin: 15px auto; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

.container { 
    position: relative; 
    width: 100%; 
} 

.nav { 
    display: inline; 
    width: 200px; 
    border-right: #111 solid 2px; 
} 

.main { 
    display: inline; 
    width: 700px; 
} 

.footer { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
}

HTML :

<body> 
     <div class="header">header</div> 
     <div class="container"> 
      <div class="nav">navigation</div> 
      <div class="main">main</div> 
     </div> 
     <div class="footer">footer</div> 

</body>

출처

2014-02-15 user3312739

nav 또는 nav 오른쪽의 main div를 원하십니까 ?? –

nav 오른쪽에 main div가 필요했습니다 .... slash197은 완벽한 솔루션을 가졌습니다! 대단히 감사합니다! – user3312739

이 시도 :

.nav { display: inline-block; width: 200px; } 
.main { display: inline-block; width: 700px; } 
.container { display: block; width: 900px; margin: 0px auto; }

출처

2014-02-15 07:15:44 slash197

이것은 완벽하게 작동했습니다! 정말 고맙습니다! – user3312739

변경하면

body { 
    text-align: center; 
    margin: 0px 0px; 
    padding: 0px; 
    background-color: #FFFFFF; 
    font-family: Tahoma, Arial, sans-serif; 
} 

.header { 
    max-width: 918px; 
    margin: 15px auto; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
      border:1px solid red; 
} 

.container { 
clear: both; 
    margin: 0 auto; 
    width: 100%; 
} 
.contain{ 

width:960px; 
margin: 0 auto; 
position: relative; 
} 
.nav { 
    width: 200px; 
    border-right: #111 solid 2px; 
    border:1px solid yellow; 
    float:left; 
    word-wrap: break-word; 
} 

.main { 
    width: 718px; 
    border:1px solid blue; 
    float:left; 
    word-wrap: break-word; 
} 

.footer { 
clear:both; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
      border:1px solid green; 
}

,691에와 CSS

과 HTMl이 있습니다.

<body> 
     <div class="header">header</div> 
     <div class="container"> 
      <div class="contain"> 
       <div class="nav">navigationnavigationnavigationnavigationnavigationnavitionnavigation</div> 
       <div class="main">mainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmnmainmainmainmain</div> 
      </div> 
     </div> 
     <div class="footer">footer</div> 
</body>

그러면 정상적으로 작동합니다.

행운을 빌어 요 .... 행운을 빌어 요 ....

출처

2014-02-15 07:39:44

간단한 CSS HTML 레이아웃 문제

답변

관련 문제