【css基础】三栏布局的实现方式（6种）

最新推荐文章于 2022-06-29 12:36:35 发布

Jnim

最新推荐文章于 2022-06-29 12:36:35 发布

阅读量153

点赞数

分类专栏：面试题文章标签： css flex html

本文链接：https://blog.csdn.net/weixin_44210750/article/details/109695293

版权

面试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

1. 圣杯布局实现

页面缩得很小时会布局混乱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局</title>
    <style>
        header, footer {
            width: 100%;
            height: 100px;
            background-color: rgb(137, 67, 202);
        }

        #container {
            overflow: hidden;
            padding: 0 200px;
        }

        .center {
            float: left;
            width: 100%;
        }

        .left, .right {
            position: relative;
            width: 200px;
            background-color: aqua;
        }
        .left {
            float: left;
            margin-left: -100%;
            left: -200px;
        }
        .right {
            float: right;
            margin-left: -100%;
            left: 200px;
        }
    </style>
</head>
<body>
    <header></header>
    <div id="container">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <footer></footer>
</body>
</html>

2. 双飞翼布局实现

在center里面加一个div标签，使用这个标签的margin撑开盒子可以避免圣杯布局上面的错误

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双飞翼布局实现</title>
    <style>
        header, footer {
            width: 100%;
            height: 100px;
            background-color: rgb(137, 67, 202);
        }

        #container {
            overflow: hidden;
        }

        .center {
            float: left;
            width: 100%;
        }

        main {
            margin: 0 200px;
        }

        .left, .right {
            position: relative;
            width: 200px;
            margin-left: -100%;
            background-color: aqua;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
    </style>
</head>
<body>
    <header></header>
    <div id="container">
        <div class="center"><main>
            main
        </main></div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <footer></footer>
</body>
</html>

3. 绝对定位实现

<!DOCTYPE html>
<html lang="
en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位实现</title>
    <style>
        header, footer {
            width: 100%;
            height: 100px;
            background-color: rgb(137, 67, 202);
        }

        #container {
            position: relative;
            overflow: hidden;
            padding: 0 200px;
        }

        .center {
            float: left;
            width: 100%;
        }

        .left, .right {
            position: absolute;
            width: 200px;
            background-color: aqua;
        }
        .left {
            float: left;
            left: 0;
        }
        .right {
            float: right;
            right: 0;
        }
    </style>
</head>
<body>
    <header></header>
    <div id="container">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <footer></footer>
</body>
</html>

4. table实现

可以使三栏高度统一，但是这种写法不能优先渲染center

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用table实现</title>
    <style>
        .header,
        .footer {
            width: 100%;
            height: 100px;
            background-color: rgb(137, 67, 202);
        }

        #container {
            display: table;
            overflow: hidden;
        }

        .center,
        .left,
        .right {
            display: table-cell;
        }

        .center {
            width: 100%;
            vertical-align: middle;
        }

        .left,
        .right {
            width: 200px;
            min-width: 200px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div id="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
    <div class="footer"></div>
</body>

</html>

5. 使用grid实现

简洁，三栏高度统一，但是高度是预先设置好的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用grid实现</title>
    <style>
        .header,
        .footer {
            width: 100%;
            height: 100px;
            background-color: rgb(137, 67, 202);
        }

        #container {
            display: grid;
            grid-template-rows: 200px;
            grid-template-columns: 200px auto 200px;
            overflow: hidden;
        }

        .left,
        .right {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div id="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
    <div class="footer"></div>
</body>

</html>

6. 使用flex实现

三栏高度统一，并且可以优先渲染center

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用flex实现</title>
    <style>
        .header,
        .footer {
            width: 100%;
            height: 100px;
            background-color: rgb(137, 67, 202);
        }

        #container {
            display: flex;
        }

        .left,
        .right {
            width: 200px;
            background-color: aqua;
            flex-shrink: 0;
        }

        .left {
            order: 1;
        }
        
        .center {
            order: 2;
            width: 100%;
        }

        .right {
            order: 3;
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div id="container">
        <div class="center">lorem*10</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer"></div>
</body>

</html>

Jnim

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【css基础】三栏布局的实现方式（6种）

文章目录1. 圣杯布局实现2. 双飞翼布局实现3. 绝对定位实现4. table实现5. 使用grid实现6. 使用flex实现1. 圣杯布局实现页面缩得很小时会布局混乱<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
复制链接

扫一扫