打赏

三栏自适应常用布局方法

1、float

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

    <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>三栏自适应常用布局</title>
        <style type="text/css">
            .p {
                overflow: hidden;
            }
            
            .left {
                float: left;
                width: 100px;
                background: red;
            }
            
            .middle {
                margin: 0 100px;
                background: yellow;
            }
            
            .right {
                float: right;
                width: 100px;
                background: blueviolet;
            }
        </style>
    </head>

    <body>
        <div class="p">
            <div class="left">
                left
            </div>
            <div class="right">
                right
            </div>
            <div class="middle">
                middle
            </div>
        </div>
    </body>

</html>

 

2、flex

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

    <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>三栏自适应常用布局</title>
        <style type="text/css">
            .p {
                display: flex;
            }
            
            .left {
                width: 100px;
                background: red;
            }
            
            .middle {
                flex: 1;
                background: yellow;
            }
            
            .right {
                width: 100px;
                background: blueviolet;
            }
        </style>
    </head>

    <body>
        <div class="p">
            <div class="left">
                left
            </div>
            <div class="middle">
                middle
            </div>
            <div class="right">
                right
            </div>
        </div>
    </body>

</html>

 

3、grid

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

    <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>三栏自适应常用布局</title>
        <style type="text/css">
            .p {
                display: grid;
                grid-template-columns: 100px auto 100px;
            }
            
            .left {
                background: red;
            }
            
            .middle {
                background: yellow;
            }
            
            .right {
                background: blueviolet;
            }
        </style>
    </head>

    <body>
        <div class="p">
            <div class="left">
                left
            </div>
            <div class="middle">
                middle
            </div>
            <div class="right">
                right
            </div>
        </div>
    </body>

</html>

4、table布局（不建议使用）

posted @ 2018-10-09 10:37  孟繁贵  阅读(556)  评论(0)  编辑  收藏  举报
TOP