两侧定宽中间自适应的几种方法

关注

原创最新推荐文章于 2026-04-19 12:09:38 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

会员管理小程序实战开发04-用户登录及注册上一节我们介绍了用户信息数据源的创建及网格布局的使用，本节的话我们讲解用户的登录及注册功能任何开发。在我们前述章节里介绍的，不论是管理员表还是用户表，都涉及到一个问题就是openid，那这个openid如何获取呢？如果我直接把代码贴给你，就缺失了一个思考的过程。既然这个是微信提出的概念，那么必然就会有官方文档作为对应。程序开发的基本功就是要会看官方文档，很多初学的开发同学可能会对官方文档颇有诟病，觉得不够基础。怎么说呢，当你进入到开发岗之后，自学能力是必要的，还是要试着可以看懂官方文档才好。登录接口解读阅读详情

1.使用浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #left,#right{
           width: 200px;
            height: 100px;
            background-color: red;
        }
        #left{
            float: left;
        }
        #right{
            float: right;
        }
        #center{
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="left"></div>
    <div id="right"></div>
    <div id="center">
    </div>
</div>
</body>
</html>

2.使用定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box>div{
        position: absolute;
        height: 100px;
    }

    .left{
        left: 0;
        width: 200px;
        background: red;
    }
    .center{
        left: 200px;
        right: 200px;
        background: yellow;
    }
    .right{
        right: 0;
        width: 200px;
        background: red;
    }
</style>
<body>
<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>
</html>

3.使用flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            display: flex;
            height: 100px;
        }
        .left{
            width: 200px;
            background: red;
        }
        .center{
            flex: 1;
            background: yellow;
        }
        .right{
            width: 200px;
            background: red;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>
</html>

4.使用table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
            display: table;
            height: 100px;
        }
        .box>div{
            display: table-cell;
        }
        .left{
            width: 200px;
            background: red;
        }
        .center{
            background: yellow;
        }
        .right{
            width: 200px;
            background: red;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>
</html>

5.使用grid

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            grid-template-columns:200px auto 200px;
        }
        .left,.right{
            background: red;
        }
        .center{
            background: yellow;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>
</html>

收录于