如何使用CSS正确对齐元素

Question

我的网站布局非常简单。我希望它看起来像这样：

• 跨越页面宽度的一行文字。
• 下面有四列单独的文字。
• 下面两列，其中：
  • 左侧的列更薄，并且跨越页面的剩余高度。
  • 右侧的列有一行短文本，然后是另一行文本，它跨越页面的剩余高度。

每个红色块都是文本。现在我只是将每个块放在下一个块下面，全部居中。我希望它像上面的图像一样布局。

我似乎无法弄清楚如何正确地做到这一点。使用相对对齐是一团糟。百分比似乎也不起作用。

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非常简单。只需查看流畅的两列布局css ，然后阅读其中一篇文章。