三栏布局

最新推荐文章于 2023-12-27 16:36:41 发布

椰椰要努力

最新推荐文章于 2023-12-27 16:36:41 发布

阅读量294

点赞数

分类专栏： HTML、CSS 文章标签：布局三栏布局 css flex grid

本文链接：https://blog.csdn.net/gladys_1111/article/details/77141990

版权

HTML、CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

圣杯和双飞翼布局在另一篇有讲到，这里就不再赘述了，链接：圣杯布局和双飞翼布局

一：float + box-sizing + background-clip
重点：main的border、background-clip、box-sizing，left和right的margin-left。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局</title>
    <style>
        * {
            text-align: center;
        }
        .header {
            height: 50px;
            line-height: 50px;
            background-color: #ff6666;
        }
        .content {
            overflow: hidden;
        }
        .content .main {
            float: left;
            width: 100%;
            height: 300px;
            line-height: 300px;
            border-left: 180px solid lightgray;       /* √ */
            border-right: 180px solid lightgray;      /* √ */
            padding: 0 20px;
            background-clip: content-box;             /* √ */
            box-sizing: border-box;                   /* √ */
            background-color: lightcoral;
        }
        .content .left, .content .right {
            float: left;
            width: 180px;
            height: 300px;
            line-height: 300px;
        }
        .content .left {
            margin-left: -100%;             /* √ */
        }
        .content .right {
            margin-left: -180px;            /* √ */
        }
        .footer {
            height: 50px;
            line-height: 50px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
<div>
    <!--头部-->
    <div class="header">header</div>

    <!--主题内容-->
    <div class="content">
        <div class="main">main</div>     <!-- 将main放在前面让其先加载出来 -->
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

    <!-- 底部-->
    <div class="footer">footer</div>
</div>
</body>
</html>

页面效果：
这里写图片描述

二：flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局（flex）</title>
    <style>
        * {
            text-align: center;
        }
        .header {
            height: 50px;
            line-height: 50px;
            background-color: #ff6666;
        }
        .content {
            display: flex;                /* √ */
        }
        .content .main { 
            order: 1;                     /* √ */
            flex: 1;                      /* √ */
            height: 300px;
            line-height: 300px;
            margin: 0 20px;
            background-color: lightcoral;
        }
        .content .left, .content .right {
            width: 180px;
            background-color: antiquewhite;
        }
        .content .right {
            order: 2;                 /* √ */
        }
        .footer {
            height: 50px;
            line-height: 50px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
<div>
    <!--头部-->
    <div class="header">header</div>

    <!--主题内容-->
    <div class="content">
        <div class="main">main</div>     <!-- 将main放在前面让其先加载出来 -->
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

    <!-- 底部-->
    <div class="footer">footer</div>
</div>
</body>
</html>

页面效果：
这里写图片描述

三：grid

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局（grid）</title>
    <style>
        * {
            text-align: center;
        }
        .header {
            height: 50px;
            line-height: 50px;
            background-color: #ff6666;
        }
        .content {
            height: 300px;
            display: grid;                               /* √ */
            grid-template-columns: 180px 1fr 180px;      /* √ */
            grid-gap: 20px;                              /* √ */
        }
        .content .main {
            grid-area: 1/2/2/3;                          /* √ */
            background-color: lightcoral;
        }
        .content .left, .content .right {
            background-color: #ffcccc;
        }
        .footer {
            height: 50px;
            line-height: 50px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
<!--头部-->
<div class="header">header</div>

<!--主题内容-->
<div class="content">
    <div class="main">main</div>     <!-- 将main放在前面让其先加载出来 -->
    <div class="left">left</div>
    <div class="right">right</div>
</div>

<!-- 底部-->
<div class="footer">footer</div>
</body>
</html>

页面效果：
这里写图片描述

椰椰要努力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三栏布局

圣杯和双飞翼布局在另一篇有讲到，这里就不再赘述了，链接：圣杯布局和双飞翼布局一：float + box-sizing + background-clip 重点：main的border、background-clip、box-sizing，left和right的margin-left。<!DOCTYPE html><html lang="en"><head> <meta charset=
复制链接

扫一扫

专栏目录