两种方法实现左右两栏固定，中间栏自适应布局且中间栏优先加载。1.CSS3 calc函数+position+float 2.

最新推荐文章于 2022-08-27 18:07:31 发布

antipro7

最新推荐文章于 2022-08-27 18:07:31 发布

阅读量245

点赞数

本文链接：https://blog.csdn.net/weixin_41976150/article/details/83143414

版权

先上结果图

页面缩小时

第一种方法代码如下：

<!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>
    .main{
            width: 100%;
            background: red;
            overflow: hidden;
            position: relative;
        }

        .left{
            width: 200px;
            height: 500px;
            background: yellow;
            float: left;
        }

        .right{
            width: 200px;
            height: 500px;
            background: green;
            float: right;
        }

        .middle{
            background: rosybrown;
            position: absolute;
            top: 0;
            left: 210px;
            height: 500px;
            width: calc(100% - 420px);
        }
    
    
    </style>
</head>
<body>
    <div class="main">
        <div class="middle">middle</div>
        <div class="left">left</div> 
        <div class="right">right</div>
    </div>
</body>
</html>

第二种方法：


    <style>
        html,body{
            margin: 0;
            height: 100%;
        }
        .body{
            width: 100%;
            height: 100%;
            float: left;
        }
        .main{
            margin: 0 210px;
            height: 100%;
            background: red;
        }
        .left,.right{
            float: left;
            width: 200px;
            height: 100%;
        }
        .left{
            margin-left: -100%;
            background: green;
        }
        .right{
            margin-left: -200px;
            background: blue;
        }
    </style>

<body>
    <div class="body">
        <div class="main"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>

antipro7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两种方法实现左右两栏固定，中间栏自适应布局且中间栏优先加载。1.CSS3 calc函数+position+float 2.

先上结果图页面缩小时第一种方法代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,
复制链接

扫一扫