美文网首页
css实现三栏布局,左右固定,中间自适应。

css实现三栏布局,左右固定,中间自适应。

作者: 无言_4f45 | 来源:发表于2021-03-03 20:50 被阅读0次

    1.flex方式

    <!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>Document</title>
        <style>
            .box {
                display: flex;
                justify-content: center;
                height: 200px;
            }
            .left {
                width: 200px;
                background-color: red;
                height: 100%;
            }
            .content {
                background-color: yellow;
                flex: 1;
            }
            .right {
                width: 200px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="content"></div>
            <div class="right"></div>
        </div>
    </body>
    </html>
    

    2.绝对定位方式

    <!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>Document</title>
        <style>
            .box {
                position: relative;
                height: 200px;
            }
            .left {
                width: 200px;
                background-color: red;
                left: 0;
                height: 100%;
                position: absolute;
            }
            .content {
                background-color: yellow;
                left: 200px;
                right: 200px;
                height: 100%;
                position: absolute;
            }
            .right {
                width: 200px;
                background-color: green;
                right: 0;
                height: 100%;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="content"></div>
            <div class="right"></div>
        </div>
    </body>
    </html>
    

    3.浮动方式

    <!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>Document</title>
        <style>
            .box {
                height: 200px;
            }
            .left {
                width: 200px;
                background-color: red;
                float: left;
                height: 100%;
            }
            .content {
                background-color: yellow;
                height: 100%;
            }
            .right {
                width: 200px;
                background-color: green;
                float: right;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
            <div class="content"></div>
        </div>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:css实现三栏布局,左右固定,中间自适应。

          本文链接:https://www.haomeiwen.com/subject/jwiqqltx.html