阅读 48

三列布局几种经典实现方式

今天我们来总结一下经典的三列布局的实现。

三列布局,一般指两端固定宽度,中间宽度自适应的布局方式,这种布局应用还蛮广泛的,比如菜鸟编程:

实现方式大方向来看有差不多四种:

1、绝对定位

这可以算是最简单的一种了,关键点在于中间版块不给宽度,通过左右绝对定位left和right实现自适应,话不多说直接上代码

 .container {
    width: 500px;
    height: 800px;
    background-color: #eee;
    margin: 0 auto;
    position: relative;
    border: 2px solid #333;
}

.left {
    position: absolute;
    left: 0;
    width: 100px;
    height: 800px;
    background-color: green;
}

.right {
    position: absolute;
    right: 0;
    width: 200px;
    height: 800px;
    background-color: blue;
}

.middle {
    position: absolute;
    left: 100px;
    right: 200px;
    height: 800px;
    background-color: red;
}
复制代码

2、两侧浮动+中间自动撑开

两侧浮动很简单,只需要用到float即可。

.left {
    width: 100px;
    height: 800px;
    background: green;
    float: left;
}

.right {
    width: 150px;
    height: 800px;
    background: blue;
    float: right;
}
复制代码

中间自适应的方式有很多,可以通过display:block实现,也可以通过calc()计算出宽度,或者给左右固定margin等方式实现

.middle {
    height: 800px;
    background: red;
    display: block;
}
复制代码

3、圣杯布局和双飞翼布局

挺有意思的名称,看一下下面这段代码:

<div class="container">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
复制代码
.middle {
    width: 100%;
    height: 100%;
    background: red;
    float: left;
}

.left {
    width: 100px;
    height: 100%;
    background: green;
    margin-left: -100%;
    float: left;
}

.right {
    width: 150px;
    height: 100%;
    background: blue;
    margin-left: -150px;
    float: left;
}
复制代码

效果如图:

圣杯布局和双飞翼布局在这里的思路都是一样的,通过三栏float和负margin达到三列并列效果。不同的地方在于处理中间板块被遮挡的方法。

先来看一看圣杯布局: 给最外层左右padding等于左右板块的宽度,再通过相对定位把左右板块往两边拉

.container{
    padding: 0 150px 0 100px;
}
.left{
    position: relative;
    left: -100px;
}
.right{
    position: relative;
    right: -150px;
}
复制代码

而双飞翼布局则是通过内层加margin的方式,让内层元素刚好定位到露出部分

<div class="container">
    <div class="middle">
        <div class="inner">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
复制代码
.inner {
    margin: 0 150px 0 100px;
}
复制代码

完成后的布局如下:

4、通过特定布局实现,比如flex/grid/table布局

这些特殊布局这里就不特地贴代码了,都可以实现三列布局。

以下是引用小火柴的蓝色理想博客中的一段话:

无论是什么布局方式,无外乎需要应用float、inline-block、table、absolute、flex、grid这6种布局属性,
然后再配合负margin、calc()函数、bfc、增加结构等来实现布局

自适应包括两种情况:一种是宽度由内容撑开,一种是宽度自动撑满父元素剩余宽度
可实现宽度由内容撑开的属性有: float、inline、inline-block、table、table-cell、absolute、fixed、flex、grid
可实现宽度自动撑满父元素剩余宽度的属性有: overflow(配合float)、table、flex、grid
复制代码


朝闻道,夕死可矣

关注下面的标签,发现更多相似文章
评论