簡單的CSS HTML佈局問題

我無法編寫帶有居中內容，簡單圖像標題，兩列（導航和主要內容）的CSS佈局，最後還有一個下面的頁腳。簡單的CSS HTML佈局問題

問題是，我無法獲得導航/主要內容列來保存大小（分別爲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

你想要主導div下面導航或在右側的導航？ –

我需要導航權的主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

更改你這個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; 
      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; 
}

和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佈局問題

回答

相關問題