实现三栏布局

最新推荐文章于 2023-10-01 20:09:08 发布

不归少年

最新推荐文章于 2023-10-01 20:09:08 发布

阅读量198

点赞数

分类专栏： html，css

本文链接：https://blog.csdn.net/Wang_jiao_yaa/article/details/107527932

版权

html，css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、实现三栏布局（两边等宽，中间自适应）

通过浮动
middle布局在最后面！！不适用浮动，不设置宽度，通过设置margin与左右两边“相连接"

<div class="content">
        <div class="left"></div>
        <div class="right"></div>
        <div class="middle">
            实现三栏布局 实现三栏布局 实现三栏布局 实现三栏布局 实现三栏布局 实现三栏布局
        </div>
    </div>

        * {
            padding: 0;
            margin: 0;
        }

        .content {
            width: 100%;
        }

        .left {
            width: 300px;
            height: 200px;
            float: left;
            background-color: red;
        }

        .right {
            width: 300px;
            height: 700px;
            float: right;
            background-color: yellow;
        }

        .middle {
            margin-left: 300px;
            margin-right: 300px;
            background-color: #4990E2;
        }

通过定位
布局无所谓，但是三栏的高度不统一，除非给父元素设置一个高度，子元素继承

        * {
            padding: 0;
            margin: 0;
        }

        .content {
            position: relative;
            width: 100%;
            height: 300px;
        }

        .simple {
            position: absolute;
            top: 0;
            height: 100%;
        }

        .left {
            width: 300px;
            left: 0;
            background-color: yellow;
        }

        .right {
            width: 300px;
            right: 0;
            background-color: yellowgreen;
        }

        .middle {
            left: 300px;
            right: 300px;
            background-color: red;
        }

弹性布局
给容器元素设置display，在布局有序的情况下可以直接让middle盒子flex为1，无序的情况下，给每哥盒子通过order指定他们的排列顺序
可以实现高度自适应

  * {
            padding: 0;
            margin: 0;
        }

        .content {
            width: 100%;
            display: flex;
        }
        .simple {
            width: 300px;
            height: 100px;
        }

        .left {
            order: 1;
            background-color: yellow;
        }

        .right {
            order: 3;
            background-color: yellowgreen;
        }

        .middle {
            flex: 1;
            order: 2;
            background-color: red;
        }

table布局
父元素设置table，子元素设置table-cell

        * {
            padding: 0;
            margin: 0;
        }

        .content {
            width: 100%;
            display: table;
        }
        .simple {
            display: table-cell;
            width: 300px;
            height: 100px;
        }

        .left {
            background-color: yellow;
        }

        .right {
            background-color: yellowgreen;
        }

        .middle {
            background-color: red;
        }

父盒子设置padding+position，子元素设置left、right、

<style>
    .content {
        padding: 0 300px;
        height: 500px;
        background-color: yellow;
        position: relative;
    }
    .middle {
        width: 100%;
        height: 100%;
    }
    .bg {
        position: absolute;
        top: 0;
        height: 100%;
    }
    .left {
        left: 0;
        width: 300px;
        background-color: red;
    }
    .right {
        right: 0;
        width: 300px;
        background-color: green;
    }
    </style>
</head>
<body>
    <!-- 圣杯布局 -->
    <div class="content">
        <div class="left bg"></div>
        <div class="middle bg"></div>
        <div class="right bg"></div>
    </div>
</body>

圣杯布局外层padding+子元素left、relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局float+postion+padding</title>
    <style>
    .content {
        padding: 0 300px;
        height: 500px;
    }
    .bg {
        height: 100%;
        position: relative;
        top: 0;
    }
    .middle {
        width: 100%;
        float: left;
        background-color: yellow;
    }
    .left {
        width: 300px;
        height: 100%;
        float: left;
        margin-left: -100%;
        left: -300px;
        background-color: red;
    }
    .right {
        width: 300px;
        float: left;
        margin-right: -300px;
        background-color: green;
    }
    </style>
</head>
<body>
    <!-- 圣杯布局 -->
    <div class="content">
        <div class="middle bg"></div>
        <div class="left bg"></div>
        <div class="right bg"></div>
    </div>
</body>
</html>

双飞翼布局
中间盒子不设宽度，设置两边的margin值，并且被另一个盒子counter包着，这个盒子counter宽度为100%，并且设置float为left，其他两个盒子也设置浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>三栏布局float+postion+padding</title>
    <style>
    .content{
        width: 100%;
        height: 500px;
    }
    .counter {
        width: 100%;
        height: 500px;
        float: left;
    }
    .middle {
        margin: 0 300px;
        background-color: yellow;
    }
    .bg {
        height: 100%;
       
    }
    .left {
        width: 300px;
        margin-left: -100%;
        background-color: red;
        float: left;
    }
    .right {
        width: 300px;
        margin-left:  -300px;
        background-color: green;
        float: left;
    }
    </style>
</head>
<body>
    <!-- 圣杯布局 -->
    <div class="content">
        <div class="counter">
            <div class="middle bg"></div>
        </div>
        <div class="left bg"></div>
        <div class="right bg"></div>
    </div>
</body>
</html>

2、三列等宽布局

float

<div class="content">
        <div class="left bg"></div>
        <div class="middle bg"></div>
        <div class="right bg"></div>
    </div>

.content {
        width: 100%;
        height: 500px;
    }
    .bg {
        width: 33%;
        height: 100%;
        float: left;
        border: solid 1px red;
    }

弹性布局

.content {
        width: 100%;
        height: 500px;
        display: flex;
    }
    .bg {
        flex: 1;
        height: 100%;
        border: solid 1px red;
    }

table布局

    .content {
        width: 100%;
        height: 500px;
        display: table;
    }
    .bg {
        display: table-cell;
        height: 100%;
        border: solid 1px red;
    }

不归少年

关注

0
点赞
踩
2

收藏

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

1、实现三栏布局通过浮动middle布局在最后面！！不适用浮动，不设置宽度，通过设置margin与左右两边“相连接"优缺点：<div class="content"> <div class="left"></div> <div class="right"></div> <div class="middle"> 实现三栏布局实现三栏布局实现三栏布局实
复制链接

扫一扫

专栏目录