前端每日一练：三栏布局，包括 Flex 布局、浮动布局、Grid 布局以及绝对定位布局。

zero笨小孩

已于 2024-03-06 14:48:35 修改

阅读量467

点赞数 8

分类专栏：前端每日一练文章标签： css css3 前端 html 面试

于 2024-03-06 14:42:16 首次发布

本文链接：https://blog.csdn.net/SAXX2/article/details/136505654

版权

前端每日一练专栏收录该内容

62 篇文章 8 订阅

订阅专栏

介绍

在网页开发中，三栏布局是一种常见的结构，通常包括一个固定宽度的左侧栏、一个固定宽度的右侧栏以及一个自适应宽度的主要内容区域。本文将介绍使用不同的布局方式实现三栏布局，包括 Flex 布局、浮动布局、Grid 布局以及绝对定位布局。

Flex 布局

使用 Flex 布局是一种简单而强大的方式，它通过 display: flex 属性来定义容器为 Flex 容器。以下是一个基本的示例：

<html>

<head>
    <style type="text/css">
        .container {
            display: flex;
        }

        .left,
        .right {
            width: 200px;
        }

        .main {
            flex: 1;
            /* 自动扩展填充剩余空间 */
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left" style="border: 1px solid black;">Left Sidebar</div>
        <div class="main" style="border: 1px solid black;">Main Content</div>
        <div class="right" style="border: 1px solid black;">Right Sidebar</div>
    </div>
</body>

</html>

Flex 布局的优势

灵活性： 可以轻松调整各列的宽度，适应不同屏幕尺寸。
自适应： 主要内容区域会自动填充剩余空间，适应内容变化。

浮动布局

浮动布局是一种传统的布局方式，通过使用 float 属性来定义元素的位置。以下是一个浮动布局的示例：

<html>

<head>
    <style type="text/css">
        .container {
            width: 100%;
        }

        .left {
            width: 200px;
            float: left;
        }

        .main {
            margin-left: 200px;
            /* 宽度等于左侧栏宽度 */
            margin-right: 200px;
            /* 宽度等于右侧栏宽度 */
        }

        .right {
            width: 200px;
            float: right;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left" style="border: 1px solid black;">Left Sidebar</div>
        <div class="right" style="border: 1px solid black;">Right Sidebar</div>
        <div class="main" style="border: 1px solid black;">Main Content</div>
    </div>
</body>

</html>

浮动布局的注意事项

清除浮动： 在使用浮动布局时，可能需要清除浮动，以防止父容器无法正常包裹子元素

Grid 布局

使用 Grid 布局是一种现代化的方式，通过 display: grid 属性来定义网格容器。以下是一个使用 Grid 布局的示例：

<html>

<head>
    <style type="text/css">
        .container {
            display: grid;
            grid-template-columns: 200px 1fr 200px;
            /* 列的宽度 */
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left" style="border: 1px solid black;">Left Sidebar</div>
        <div class="main" style="border: 1px solid black;">Main Content</div>
        <div class="right" style="border: 1px solid black;">Right Sidebar</div>
    </div>
</body>

</html>

Grid 布局的优势

网格控制： 提供了直观的网格控制，适用于复杂布局。
自动调整： 可以根据内容的大小自动调整网格布局。

绝对定位布局

绝对定位布局是一种使用 position: absolute 属性的方式，通过定位左右侧栏，然后设置主内容区域的边距。以下是一个绝对定位布局的示例：

<html>

<head>
    <style type="text/css">
        .container {
            position: relative;
        }

        .left,
        .right {
            width: 200px;
            position: absolute;
            top: 0;
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }

        .main {
            margin: 0 200px;
            /* 宽度等于左右侧栏宽度 */
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left" style="border: 1px solid black;">Left Sidebar</div>
        <div class="main" style="border: 1px solid black;">Main Content</div>
        <div class="right" style="border: 1px solid black;">Right Sidebar</div>
    </div>
</body>

</html>