如何使用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并阅读其中的许多文章之一。