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

栏目: Html · 发布时间: 5年前

内容简介:上面实现方式优点,实现简单兼容性好缺点:根据渲染的规则,从上到下,也就是说left和right会优先渲染, center部分会最后渲染.利用负margin来完成

常用方式罗列

  • float
  • absolute
  • table
  • flex
  • grid

float

<div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">center</div>
    </div>
.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来完成

<div class="container">
    <div class="center">
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
.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
    }

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

优化方式二 (圣杯布局)

<div class="container">
    <div class="center">
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
.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 元素包裹一个容器

<div class="container">
        <div class="center-warpper">
            <div class="center">
                <p>center</p>
                <p>center</p>
                <p>center</p>
                <p>center</p>
                <p>center</p>
                <p>center</p>
                <p>center</p>
            </div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
.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

<div class="container">
    <div class="center">
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
.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

<div class="container">
        <div class="left">left</div>
        <div class="center">
            <p>center</p>
            <p>center</p>
            <p>center</p>
            <p>center</p>
            <p>center</p>
            <p>center</p>
            <p>center</p>
        </div>
        <div class="right">right</div>
    </div>
.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

<div class="container">
    <div class="left">left</div>
    <div class="center">
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
    </div>
    <div class="right">right</div>
</div>
.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

<div class="container">
    <div class="left">left</div>
    <div class="center">
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
        <p>center</p>
    </div>
    <div class="right">right</div>
</div>
.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;

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

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

大话数据结构

大话数据结构

程杰 / 清华大学出版社 / 2011-6 / 59.00元

本书为超级畅销书《大话设计模式》作者程杰潜心三年推出的扛鼎之作!以一个计算机教师教学为场景,讲解数据结构和相关算法的知识。通篇以一种趣味方式来叙述,大量引用了各种各样的生活知识来类比,并充分运用图形语言来体现抽象内容,对数据结构所涉及到的一些经典算法做到逐行分析、多算法比较。与市场上的同类数据结构图书相比,本书内容趣味易读,算法讲解细致深刻,是一本非常适合自学的读物。 本书以一个计算机教师教......一起来看看 《大话数据结构》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具