如何使用CSS正確對齊元素

Question

我是網絡設計新手，需要相當多的幫助。我知道這是一個普遍的問題，但我需要一些指針。 Google在這裏沒有幫助我。

我的網站佈局非常簡單。我希望它看起來是這樣的：

藉口繪製的粗陋。每個紅色塊是文本。現在我只是在下一個下面的每個塊，都集中。我希望它能像你在圖片中看到的那樣佈置。

我似乎無法弄清楚如何正確地做到這一點。使用相對對齊是一團糟。百分比似乎也不起作用。我在這裏感到茫然，希望有人能夠指出我需要做什麼來實現我想要的佈局。

Answer 1

網站被分成多個塊（或列）。這取決於設計師/開發人員將其劃分爲獨立組（如側欄，頁眉，頁腳，內容等）。

學習基礎知識非常重要。 this site具有相當不錯的直觀的教程HTML

也會檢出

• Designing a HTML5 layout from scratch
• Semantic HTML5 layout

還拿線索從你碰到有裝有瀏覽器的開發者工具的幫助下網站。

Answer 2

我想通過分解成大塊入手：

從那裏，只是使結構：

<header> 
    ... 
</header> 

<nav> 
    <ul> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
    </ul> 
</nav> 

<aside> 
    ... 
</aside> 

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

    <article> 
     ... 
    </article> 
</div> 

的CSS是非常簡單的。只需查看fluid two column layout css並閱讀其中的許多文章之一。