css - 如何使用 CSS 正确对齐元素

Question

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

• 跨越页面宽度的一行文本。
• 其下方有四个单独的文本列。
• 下面的两列 where：
  • 左边的列更薄，跨越页面的剩余高度。
  • 右侧的列有一小行文本，然后在其下方有另一行跨越页面剩余高度的文本。

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

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

Answer 1

网站分为多个块（或列）。由设计人员/开发人员将其划分为独立的组（如侧边栏、页眉、页脚、内容等）

学习基础知识非常重要。这个网站有相当不错的直观教程 HTML

也结帐

• 从头开始设计 HTML5 布局
• 语义 HTML5 布局

还可以借助包含浏览器的开发人员工具从您遇到的网站中获取线索。

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并阅读其中的众多文章。