CSS：两行三列布局和三行两列布局

最新推荐文章于 2024-10-30 20:31:07 发布

原创最新推荐文章于 2024-10-30 20:31:07 发布 · 5.9k 阅读

36 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #前端

java Web搭建专栏收录该内容

41 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS创建两种不同的网页布局：两行三列和三行两列。在两行三列布局中，页面被划分为一个头部、一个包含三列的容器和底部空白。而三行两列布局则包含头部、一个两列的内容区域和底部。这两种布局都通过浮动元素实现了各部分的排列。

在这里插入图片描述
两行三列：将页面分成两行，将任一行分为三列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两行三列布局</title>
    <style>
        html, body {
            margin: 0px;
        }
        header {
            background-color: lightblue;
            height: 150px;
        }
        #container {
            background-color: lightgray;
            height: 600px;
        }
        nav {
            background-color: lightcoral;
            height: 100%;
            width: 200px;
            float: left;
        }
        aside {
            background-color: lightgreen;
            height: 100%;
            width: 200px;
            float: right;
        }
        article {
            background-color: lightseagreen;
            height: 100%;
        }
    </style>
</head>
<body>
    <header></header>
    <div id="container">
        <nav></nav>
        <aside></aside>
        <article>这是一个文本内容。</article>
    </div>
</body>
</html>

在这里插入图片描述
三行两列：将页面分成三行，将任一行分为两列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三行两列布局</title>
    <style>
        html, body {
            margin: 0px;
        }
        header {
            background-color: lightpink;
            height: 100px;
        }
        #container {
            background-color: lightskyblue;
            height: 500px;
        }
        footer {
            background-color: lightyellow;
            height: 150px;
        }
        nav {
            background-color: lightcyan;
            height: 100%;
            width: 200px;
            float: left;
        }
        article {
            background-color: lightsalmon;
            height: 100%;
            margin-left: 200px;
        }
    </style>
</head>
<body>
    <header></header>
    <div id="container">
        <nav></nav>
        <article></article>
    </div>
    <footer></footer>
</body>
</html>

在这里插入图片描述