HTML5三頁佈局列

幾乎花了我4個小時才能達到這一點。我真的無法記下三列的佈局。這是最好的，我可以得到到目前爲止，這是我的CSS：HTML5三頁佈局列

#header {text-align: center;} 

#container { 
    width: 960px; 
    margin: 0 auto; 
    background-color: #FAFAFA; 
    color: #003300; 
    font-family: Arial, Helvetica, sans-serif; 

} 

#left { 
    float: left; 
    width: 150px; 
} 

#center { margin:0 210px 0 160px; 

} 

#right{ 
    float: right; 
    width: 200px; 
} 

#footer { text-align: center; 
    clear: both; 
} 

#left a {text-decoration: none; 
     display: block; 
     text-align: center; 
     color: #FFFFCC; 
     font-weight:bold; 
     border: 3px outset #CCCCCC; 
     padding: 5px;} 

figure{} 

#left a:link { background-color: #003366; } 
#left a:visited { background-color: #48751A; } 
#left a:hover {border: 3px inset #333333; } 

#left ul { list-style-type: none; 
      margin: 0; 
      padding-left: 0; }

這是網站爲我的項目：

http://younani.com/finalsite/finalindex.html

正如你可以看到左，中，右欄不對齊。此外，有沒有辦法根據頁面最大化或正常來適應網站？我是新建網站。同樣如您在關於我們的頁面中看到的那樣，導航觸及了中心列，是他們的反正呢？如果需要提供更多信息，請告訴我。謝謝。

來源

2012-12-01 KKP

你可能會使用（並希望看/從中學習）一個CSS框架（http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering /不會是一個糟糕的開始）。即使你不使用它們，也需要從開源測試框架中選擇很多。 – qooplmao

您需要將float:left;添加到您的#center股利，他們將正確對齊。是的，你可以使用百分比而不是像素來使容器成爲屏幕大小的百分比。

編輯以顯示3欄佈局

這是一般的三欄佈局，您將需要當你開始添加你自己的風格來調整一些東西，但它的工作原理，它顯示了我是如何聚集#left, #center, #right在一起，並使用CSS的cascade的力量來覆蓋以前的設置。

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <title>Younani Flower's</title> 

    <meta charset="utf-8"> 

    <style> 
     #container { 
      width: 960px; 
      margin: 0 auto; 
     } 

     #container div { 
      border: 1px solid black; 
     } 

     #header {} 

     #left, 
     #center, 
     #right { 
      float: left; 
      margin: 10px 0 10px 20px; 
      min-width: 200px; 
     } 

     #center { 
      width: 494px; 
     } 

     .clear { 
      clear: both; 
     } 

    </style> 

</head> 



<body> 
    <div id="container" class="clearfix"> 

     <!-- Header --> 
     <div id="header"> 
      <h1>Younani Flowers</h1> 
     </div> 

     <!-- Left Column --> 
     <div id="left"> 
      <ul> 
       <li><a href="finalindex.html">Home</a></li> 
       <li><a href="menu.html">Menu</a></li> 
       <li><a href="financing.html">Ocassions</a></li> 
       <li><a href="aboutus.html">About Us</a></li> 
       <li><a href="contactus.html">Contact Us</a></li> 
      </ul> 
     </div> 

     <!-- Center Column --> 
     <div id="center"> 
      <p>Main content</p> 
     </div> 

     <!-- Right Column --> 
     <div id="right"> 
      <p>Secondary Sidebar</p> 
     </div> 

     <!-- Footer --> 
     <div id="footer" class="clear">  
      <p>&copy; Copyright "Younani" Michael Younani 2012<br /><a href="mailto:[email protected]">[email protected]</a></p> 
     </div> 
    </div><!-- #container --> 
</body> 

</html>

來源

2012-12-01 08:02:14 gregwhitworth

這確實對齊了它，但是如果你檢查了關於我們的頁面，當我插入段落時，你會看到它如何不對齊所有內容？ – KKP

我知道很多網站會顯示添加邊距來創建中心列。但我更喜歡寬度。使用寬度您的問題立即解決，添加一個'width：600px'寬度到您的中心div並關閉邊距，它會正常工作。然後在你想要的地方添加一個「margin-left」來確定你想要的數量。或者只是使用自動中心。 – gregwhitworth

感謝您的快速回復。我將600px的寬度和margin-left：auto添加到了中心div。它現在對齊了，但是中心觸摸左邊的導航，是因爲我選擇寫自動？如果我迷惑了你，我可以再次發佈CSS。 – KKP

HTML5三頁佈局列

回答

相關問題