三栏布局-左右宽固定,中间自适应

hiYoHoo 发布于2019-08-30 11:01 / 945人阅读

摘要：优化方式二圣杯布局优化方式三双飞翼布局给元素包裹一个容器处理方式二和三解决方式非常类似只是处理的细节不一样具体用那个都可以一般推荐用前者上面就是实现的几种方式细心同学应该可以看到这两种方式左右两列并不会随着中间内容区域高度变化而变化。

常用方式罗列

float

absolute

table

flex

grid

float

    
        left
        right
        center

.container {
    overflow: auto;  
}
.left {
    width: 200px;
    float: left;
    background-color: #1ABC9C;
}
.right {
    width: 200px;
    float: right;
    background-color: #2ECC71;
}
.center {
    margin-left: 200px;
    margin-right: 200px;
    background-color: #3498DB;
}

上面实现方式优点,实现简单兼容性好

缺点：根据渲染的规则,从上到下,也就是说left和right会优先渲染, center部分会最后渲染.

优化方式-1

利用负margin来完成


    
        center
        center
        center
        center
        center
        center
        center
    
    left
    right

.container {
    overflow: auto;  
}
.left,
.right,
.center {
    box-sizing: border-box;
}
.left {
    width: 200px;
    float: left;
    background-color: #1ABC9C;
    margin-left: -100%;
}
.right {
    width: 200px;
    float: right;  // float:left;
    background-color: #2ECC71;
    margin-left: -200px;
}
.center {
    float: left;
    width: 100%;
    padding-left: 200px;
    padding-right: 200px;
    background-color: #3498DB;

}

完成前面主要内容优先加载问题,但是又有新问题,当主体内容过长的时,发现背景(边框、背景图等等)影响到了两侧

如果只处理背景问题可以使用下面方式

    .center {
        background-clip:  content-box
    }

如果有边框、背景图片等显然上面不能满足。

优化方式二 (圣杯布局)


    
        center
        center
        center
        center
        center
        center
        center
    
    left
    right

.container {
    margin:0 200px;
    position: relative;
}
.left,
.right,
.center {
    box-sizing: border-box;
}

.center {
    float: left;
    width: 100%;
    background-color: #3498DB;
}
.left {
    position: relative;
    left:-200px;
    float: left;
    width: 200px;
    margin-left: -100%;
    background-color: #1ABC9C;
}

.right {
    position: relative;
    right:-200px;
    float: right;
    width: 200px;
    margin-left: -200px;
    background-color: #2ECC71;
}

优化方式三: (双飞翼布局) 给 center 元素包裹一个容器

    
        
            
                center
                center
                center
                center
                center
                center
                center
            
        
        left
        right

.container {
    overflow: auto;
}

.left,
.right,
.center,
.center-warpper {
    box-sizing: border-box;
}
.center-warpper {
    float:left;
    width: 100%;
    padding-left: 200px;
    padding-right: 200px;
}
.center {
    width: 100%;
    overflow: auto;
    background-color: #3498DB;
}
.left {
    width: 200px;
    float: left;
    background-color: #1ABC9C;
    margin-left: -100%;
}

.right {
    width: 200px;
    float: right;
    background-color: #2ECC71;
    margin-left: -200px;
}

处理方式二和三解决方式非常类似,只是处理的细节不一样. 具体用那个都可以一般推荐用前者

absolute

 
    
        center
        center
        center
        center
        center
        center
        center
    
    left
    right

.container {
    position: relative;
}

.left,
.right,
.center {
    box-sizing: border-box;
}
.center {
    position: absolute;
    left: 200px;
    right: 200px;
    background-color: #3498DB;
}
.left {
    position: absolute;
    left: 0;
    width: 200px;
    background-color: #1ABC9C;
}
.right {
    position: absolute;
    right: 0;
    float: right;
    width: 200px;
    background-color: #2ECC71;
}

table

     
        left
        
            center
            center
            center
            center
            center
            center
            center
        
        right

.container {
    position: relative;
    display: table;
    width: 100%;
}

.left,
.right,
.center {
    box-sizing: border-box;
    display: table-cell;
}
.center {
    background-color: #3498DB;
}
.left {
    width: 200px;
    background-color: #1ABC9C;
}

.right {
    width: 200px;
    background-color: #2ECC71;
}

flex


    left
    
        center
        center
        center
        center
        center
        center
        center
    
    right

.container {
    position: relative;
    display: flex;
    width: 100%;
}

.left,
.right,
.center {
    box-sizing: border-box;
    display: table-cell;
}

.center {
    background-color: #3498DB;
    flex:1;
}

.left {
    width: 200px;
    background-color: #1ABC9C;
}

.right {
    width: 200px;
    background-color: #2ECC71;
}

Grid

 
    left
    
        center
        center
        center
        center
        center
        center
        center
    
    right

.container {
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: 200px auto 200px;
}

.left,
.right,
.center {
    box-sizing: border-box;
}

.center {
    background-color: #3498DB;
}

.left {
    background-color: #1ABC9C;
}

.right {
    background-color: #2ECC71;
}

上面就是实现的几种方式, 细心同学应该可以看到 float、absoulut 这两种方式左右两列并不会随着中间内容区域高度变化而变化。

如果想要创建三列布局中间自适应，且三列都等高的话选择 table、flex、Grid;

具体兼容可查阅兼容性查看

如果有更好的方式，大家可以在评论区给出; 一起讨论学习

云服务器 GPU云服务器三栏布局 html5 三栏布局 easyui左右布局固定布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114725.html

三栏布局（一）-------左右宽高固定，中间自适应

摘要：幼圆常见的页面布局有幼圆左右宽度固定，中间自适应幼圆上下高度固定，中间自适应幼圆左宽度固定，右自适应幼圆上高度固定，下自适应，幼圆下边是我看过网上的视频后写出来的三栏布局左右宽高固定，中间自适应幼圆有种布局方常见的页面布局有 1、左右宽度固定，中间自适应； 2、上下高度固定，中间自适应； 3、左宽度固定，右自适应； 4、上高度固定，下自适应，下边是我看过网上的视频后写出来的三栏布局-左右宽...

Aldous 2019-04-23 13:08 评论0 收藏0
css三栏布局：左右固定宽中间自适应

摘要：圣杯布局直接上代码双飞翼布局自身浮动法绝对定位法圣杯布局直接上代码：html: css: .middle,.left,.right {float: left;} .middle {width: 100%;} .left {margin-left: -100%; width: 220px; } .right {margin-left: -220px; wi...

CoorChice 2019-08-30 15:52 评论0 收藏0
css三栏布局：左右固定宽中间自适应

摘要：圣杯布局直接上代码双飞翼布局自身浮动法绝对定位法圣杯布局直接上代码：html: css: .middle,.left,.right {float: left;} .middle {width: 100%;} .left {margin-left: -100%; width: 220px; } .right {margin-left: -220px; wi...

Vicky 2019-08-01 16:14 评论0 收藏0
三栏布局（二）-------上下宽高固定，中间自适应

摘要：上一篇写的是左右宽高固定，中间自适应，根据上一篇的内容，总结了下上下宽高固定，中间自适应的几种布局方式，有种布局方式话不多说，直接上代码。上一篇写的是左右宽高固定，中间自适应，根据上一篇的内容，总结了下上下宽高固定，中间自适应的几种布局方式，有4种布局方式： position; flex; table; grid; 话不多说，直接上代码。 DOCTYPE html> ...

Render 2019-04-23 13:08 评论0 收藏0
三栏布局-左右宽固定,中间自适应

摘要：优化方式二圣杯布局优化方式三双飞翼布局给元素包裹一个容器处理方式二和三解决方式非常类似只是处理的细节不一样具体用那个都可以一般推荐用前者上面就是实现的几种方式细心同学应该可以看到这两种方式左右两列并不会随着中间内容区域高度变化而变化。常用方式罗列 float absolute table flex grid float left righ...

abson 2019-08-02 15:11 评论0 收藏0