经典布局方案（圣杯布局+双飞翼布局）左右固定，中间自适应

最新推荐文章于 2023-08-16 09:16:09 发布

未来前端程序员

最新推荐文章于 2023-08-16 09:16:09 发布

阅读量235

点赞数

分类专栏： web前端面试题文章标签： css html

本文链接：https://blog.csdn.net/weixin_44735018/article/details/117397889

版权

web前端同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

面试题

31 篇文章 1 订阅

订阅专栏

经典布局方案（圣杯布局+双飞翼布局）左右固定，中间自适应

圣杯布局
双飞翼布局
flex布局

其实就是左右固定，中间自适应

圣杯布局：浮动和负margin

就像一个对称的杯子，由中间和两边的把儿布局

<style>
        html,body{
            height: 100%;
            overflow: hidden;
        }
        .container{
            height: 100%;
            padding: 0 200px;/*宽度为200  因为left和right左右两边的宽度都为200*/
        }
        .left,
        .right{
            width: 200px;
            min-height: 200px;
            background: lightblue;
        }
        .center{
            width: 100%;
            min-height: 400px;
            background:lightcoral;
        }
        .left,
        .center,
        .right{
            float: left;
        }
        .left{
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right{
            margin-right:-200px;
        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

过程解析+图解析
在这里插入图片描述

双飞翼布局：浮动+负margin

就像一个人长了一双翅膀，身体是一体，但是翅膀是额外的，可要可不要
于是就有了下面这个布局

<div class="container">
   <div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>

全部代码为

<style>
        html,body{
            height: 100%;
            overflow: hidden;
        }
        .container,
        .left,
        .right{
            float: left;
        }
        .container{
            width: 100%;
        }
        .container .center{
            margin: 0 200px;
            min-height: 400px;
            background: lightcoral;
        }
        .left,
        .right{
            width: 200px;
            min-height: 200px;
            background: lightgoldenrodyellow;
        }
        .left{
            margin-left: -100%;
        }

        .right{
            margin-left: -200px ;
        }
    </style>
</head>
<body class="clearfix">
    <div class="container">
        <div class="center"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>

这个的过程解析和上图差不多，可以自己分析一下

flex布局
以flex:0 0 200px;为例
flex是一个缩写的属性，第一个值是放大的比例，
第二个是缩小的比例
第三个是在整个容器内你占空间的大小
所以left和right的大小就有了，就是200px。
flex的值为1 就是把剩余空间全占了

    <style>
        html,
        body{
            overflow: hidden;
        }
        .container{
            display: flex;
            justify-content: space-between;
            height: 100%;
        }
        .left,
        .right{
            /* flex是一个缩写的属性，第一个值是放大的比例，
            第二个是缩小的比例 
            第三个是在整个容器内你占空间的大小 
            所以left和right的大小就有了，就是200px*/
            flex:0 0 200px;
            height: 200px;
            background: lightsalmon;
        }
        .center{
            /* flex的值为1   就是把剩余空间全占了 */
            flex: 1;
            min-height: 400px;
            background: lightseagreen;
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>

</body>

最后补充一种定位实现

    <style>
        html,
        body{
            height: 100%;
            overflow: hidden;
        }
        .container{
            position: relative;
            height: 100%;
        }
        .left,
        .right{
            position: absolute;
            top:0;
            width: 200px;
            min-height: 200px;
            background: lightseagreen;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }

        .center{
            margin: 0 200px;
            min-height: 400px;
            background: lightseagreen;
        }
    </style>
</head>
<body>
    <div class="container">

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

未来前端程序员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
经典布局方案（圣杯布局+双飞翼布局）左右固定，中间自适应

经典布局方案（圣杯布局+双飞翼布局）左右固定，中间自适应圣杯布局双飞翼布局flex布局其实就是左右固定，中间自适应圣杯布局：浮动和负margin就像一个对称的杯子，由中间和两边的把儿布局<style> html,body{ height: 100%; overflow: hidden; } .container{ height: 100%;
复制链接

扫一扫