左右定宽，中间自适应布局三种方式

最新推荐文章于 2023-04-19 15:23:34 发布

江河i

最新推荐文章于 2023-04-19 15:23:34 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/z18237613052/article/details/111578481

版权

圣杯布局（结构简单，理解绕弯）

原理：外盒子的padding+ （left right）的相对定位

    <style>
        body{
            color:white;
            min-width: 900px;
        }
        .center{
            width: 100%;
            height: 300px;
            background-color:teal;      
        }
        .left{
            width: 200px;
            height: 300px;
            background-color: red;
            margin-left: -100%;
             position: relative;
            left: -200px; 
        }
        .right{
            width: 200px;
            height: 300px;
            background-color: blue;
            margin-left: -200px;
             position: relative;
            right: -200px; 
        }
        .center,.left,.right{
            float: left;
        }
        .clear::before{
            clear: both;
            display: block;
            content: "";
        }
        .clear{
            padding: 0 200px;
        }
    </style>


<body>
    <div class="clear">
        <div class="center">
            中间
        </div>
        <div class="left">
            左边
        </div>
        <div class="right">
            右边
        </div>
    </div>

</body>

步骤：
1.在主体内部外面嵌套了一个div
2.center在结构上靠前
3.center，left，right都浮动
4.清除浮动
（给嵌套的主题外部加一个伪元素::after~在**之后，然后清除浮动）
5.center宽度为100%，left，right宽度固定
6.left通过margin-left为负值（-100%），移动到center最左边
7.right通过margin-left为负值（自身的宽度），移动到center的最右边。
8.center的内容左边和右边会被left，right遮盖
9.最外层div添加一个padding，padding的值为left，right的宽度。
10.left，right相对定位，移动到相应的位置。位移量为自身的宽度。

双飞翼布局（结构较绕）

原理：用了中间盒子的里面盒子的margin值，然后左右两边用margin-left顶开

    <style>
        .center {
            width: 100%;
            height: 300px;
            background-color: teal;
            float: left;
        }
        .left {
            width: 200px;
            height: 300px;
            background-color: red;
            margin-left: -100%;
        }
        .right {
            width: 200px;
            height: 300px;
            background-color: blue;
            margin-left: -200px;
        }
        .center,
        .left,
        .right {
            float: left;
        }
        .home {
            margin: 0 200px;
        }   
    </style>


<body>
    <div class="center">
        <div class="home">
            中间
        </div>
    </div>
    <div class="left">
        左边
    </div>
    <div class="right">
        右边
    </div>
</body>

步骤：
1.让left right center浮动
2.设置left的margin-left为-100%
3.设置right的margin-left为负的自身宽度
4.在center中添加一个div，将内容写在这个div中
5.为这个div添加一个margin，左右margin的值为left right的单个宽度。

弹性盒子实现三栏（结构简单，理解复杂）

原理：用了中间盒子的flex-grow属性，然后用了order属性来改变显示位置

    <style>
        .home{
            display: flex;
        }
        .left,.right{
            width: 200px;
            height: 300px;
        }
        .left{
             order: 1; 
            background-color:blue;
        }
        .right{
            order: 3;
            background-color: red;
        }
        .center{    
            order: 2;
             flex-grow: 1; 
            background-color:green;
        }

    </style>

<body>
    <div class="home">
        <div class="center">
            中间
        </div>
        <div class="left">
            左边
        </div>
        <div class="right">
            右边
        </div>
    </div>

</body>

步骤：
1.添加一个最外层的div 暂起名为 home
2.将home设置为弹性盒子（display: flex）
3.left right 固定宽度 center不设置宽度
4.将center设置为 flex-grow: 1
（用于将弹性盒子的可用空间按照比例分配给弹性元素）;
5.调整显示顺序，left： order: 1; center： order: 2 right;： order:3;

上述三种方法都能实现左右定宽，中间自适应的效果
在这里插入图片描述

江河i

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
左右定宽，中间自适应布局三种方式

目录圣杯布局（结构简单，理解绕弯）双飞翼布局（结构较绕）弹性盒子实现三栏（结构简单，理解复杂）圣杯布局（结构简单，理解绕弯）原理：外盒子的padding+ （left right）的相对定位 <style> body{ color:white; min-width: 900px; } .center{ width: 100%; height
复制链接

扫一扫