html+CSS布局实例：大厂阿里面试题：实现三列布局

Posted 2023-04-03 The..Fuir

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html+CSS布局实例：大厂阿里面试题：实现三列布局相关的知识，希望对你有一定的参考价值。

三列布局

今天老师上课给我们分享说她的学生面试阿里大厂的其中一道面试题：三列布局

实现三列布局，左右两侧固定100px,中间自适应

方法一：flex布局

我只用了最简单的写法，没有加多余的修饰，如果感兴趣的小伙伴可以自己多加一些自己想要的页面效果上去

<html lang="en">
	<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>		
	</head>
	<body>
		<div id="box">
			<div id="left">left</div>
			<div id="center">center</div>
			<div id="right">right</div>
		</div>
	</body>
</html>
<style type="text/css">
    #box
        width:100%;
        height:100px;
        /* 加边框区分界限，每一个都加 左边盒子 中间自适应盒子 右边盒子  就都有界限了*/
        border: 1px solid black;
        display:flex;
    
    #left,#right
        width: 100px;
        height:100px;
        border: 1px solid black;
        background-color:blue;
    
    #center
        flex:1;
        height:100px;
        border: 1px solid black;
        background-color:#f00;
    
</style>

实现效果图：

会随着页面缩放中间的 center部分会自适应缩放

方法二：利用浮动(float)

方法三：利用绝对定位（position）

方法四：对中间的宽度进行calc计算

方法五：双飞翼布局（重点来了，我不会啊啊啊啊啊~）

方法六：圣杯布局（也是重点，我还是不会啊啊啊啊啊~）

目前我只学完盒子模型，只会第一种，真的好菜，呜呜呜呜，日后更多方法再为小伙伴们补充.........

方法二：利用浮动(float)

<div class="left">左边定宽</div>
<div class="right">右边定宽</div>
<div class="center">中间自适应</div>
注意：这里的排列顺寻要注意，只有先排列左右两边，中间才能自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动三列布局</title>
</head>
<body>
    <div class="left">左边定宽</div>
    <div class="right">右边定宽</div>
    <div class="center">中间自适应</div>

</body>
</html>
<style>
    /* 目前所有元素依然符合块级元素宽占比100%的特性  100%--视口区 */
    /* left、right=
    left、right设置了左右浮动，所以它们分别位于界面左右两边，页面此时只剩中间位置
    剩余center=100%- */
    .left,.right
        width: 300px;
        height: 500px;
        background-color: pink;
    
    .left
        float: left;
    
    .right
        float: right;
    
    .center
        height: 500px;
        /* margin: 0 300px; */
        background-color: green;
    
</style>

效果图：

方法四：对中间的宽度进行calc计算

<div class="left">左边定宽</div><div class="center">中间自适应</div><div class="right">右边定宽</div>

注意：这里div要紧靠着，不然</div>右边的空白会被浏览器解析成换行

width: calc(100% - 600px);

注意：这calc中 100% -600px 中的减号隔必须换行，不然不会生效，这是规定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="left">左边定宽</div><div class="center">中间自适应</div><div class="right">右边定宽</div>
</body>
</html>
<style>
    .left
        width: 300px;
        height: 800px;
        background-color: pink;
        display: inline-block;
    
    .center
        width: calc(100% - 600px);
        height: 800px;
        background-color: rgb(192, 198, 255);
        /* 将设置行内块级显示之后，与其他元素共享一行，但是宽高只是可以设置 */
        display: inline-block;
    
    .right
        width: 300px;
        height: 800px;
        background-color: rgb(255, 192, 216);
        display: inline-block;
    
</style>

效果图：随比例缩放而自适应

CSS 布局实例系列如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

今天聊聊一个经典的布局实例：

实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

可能很多朋友已经笑了，这玩意儿通过双飞翼布局就能轻松实现。不过，还请容我在双飞翼之外，循序渐进地介绍一下我们可以如何实现一个三列布局。

1. 首先，使用浮动布局来实现一下

See the Pen float-three-columns by xal821792703 (@honoka) on CodePen.

左侧元素与右侧元素优先渲染，分别向左和向右浮动
中间元素在文档流的最后渲染，并将 width 设为 100%，则会自动插入到左右两列元素的中间，随后设置 margin 左右边距分别为左右两列的宽度，将中间元素调整到正确的位置。

这是一种比较便利的实现方式，无需额外的元素辅助定位，同时兼容性也比较优秀。但有一个缺点就是该布局方式只能实现左右两列宽度固定，中间自适应这一种三列布局，灵活性不强。

2. 其实，也可以试试利用 BFC

See the Pen bfc-three-columns by xal821792703 (@honoka) on CodePen.

昨天的《CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局》已经谈到了利用 BFC 原理实现多列布局的方法。BFC 元素不会与浮动元素叠加，自然也可以利用 BFC 原理完成这个实例。

同样的左右两列元素优先渲染，并分别左右浮动。
接下来将中间元素设置 overflow: hidden; 成为 BFC 元素块，不与两侧浮动元素叠加，则自然能够插入自己的位置啦。

3. 接下来就尝试一下大名鼎鼎的双飞翼布局吧

See the Pen grid-three-columns by xal821792703 (@honoka) on CodePen.

双飞翼是由淘宝玉伯等前端大牛提出的一种多列布局方法，主要利用了浮动、负边距、相对定位三个布局属性，使三列布局就像小鸟一样，拥有中间的身体和两侧的翅膀。

接下来就简单介绍一下双飞翼的实现过程：

假设我们现在需要一个如实例说明一样的三列布局，写出如下 div 结构：

<div class="grid">
    <div id="div-middle-02"><span>div-middle</span></div>
    <div id="div-left-02"><span>div-left</span></div>
    <div id="div-right-02"><span>div-right</span></div>
</div>

首先我们将中间元素放在文档流最前面优先渲染，然后使其向左浮动，并设置 width 为 100%：
```
#div-middle-02 {
    float: left;
    background-color: #fff9ca;
    width: 100%;
    height: 50px;
}
```
中间元素直接占满全列，形成小鸟的身体。

接下来我们开始为小鸟加上双翼，将左右两列元素均设为左浮动，然后通过调整负边距将其定位在各自的位置上：

#div-middle-02 {
    float: left;
    background-color: #fff9ca;
    width: 100%;
    height: 50px;
}
#div-left-02 {
    float: left;
    background-color: red;
    width: 150px;
    margin-left: -100%;
    height: 50px;

}

#div-right-02 {
    float: left;
    background-color: yellow;
    width: 200px;
    margin-left: -200px;
    height: 50px;
}

看起来，双翼安装成功啦。技术分享

这样三列布局就大功告成了？No，no，no，仔细看看上面的效果图，可以发现 div-middle 的字块消失了。这是因为通过负边距调整浮动元素位置时，会产生层叠的效果，上面的布局其实只是左右两列元素分别定位在自己的位置上并覆盖中间元素的那部分而已，中间元素的定位并未成功。中间元素要怎样定位在自己的位置上呢？小鸟的身体不是还缺少骨架嘛，那么我们在小鸟体内加上骨架吧：
```
<div id="div-middle-02">
        <div id="middle-wrap-02"><span>div-middle</span></div>
</div>
```
在中间元素中再增加一层包裹，通过这层骨架我们就可以方便地控制小鸟身体的位置啦，方法就是调整骨架的左右边距，使其分别等于左右两列的宽度：
```
#div-middle-02 {
    float: left;
    background-color: #fff9ca;
    width: 100%;
    height: 50px;
}

#middle-wrap-02 {
    margin: 0 200px 0 150px;
}

#div-left-02 {
    float: left;
    background-color: red;
    width: 150px;
    margin-left: -100%;
    height: 50px;

}

#div-right-02 {
    float: left;
    background-color: yellow;
    width: 200px;
    margin-left: -200px;
    height: 50px;
}
```
好啦，一个左右定宽，中间自适应的三列布局以双飞翼的方式成功完成。

总结整个过程，就是先放好身体，再加上翅膀，然后让身体包裹一层骨架，通过骨架将身体定位到正确的位置。这就是双飞翼布局的完全体吗？当然不是，接下来我们要请出大杀器相对布局啦，就像小鸟可以通过各种不同的姿势飞翔一般，通过 position: relative; 双飞翼可以实现任意的三列或双列布局。本实例加上相对定位，便成为了这样的完全体：

#div-middle-02 {
    float: left;
    background-color: #fff9ca;
    width: 100%;
    height: 50px;
}

#middle-wrap-02 {
    margin: 0 200px 0 150px;
}

#div-left-02 {
    float: left;
    position: relative;
    background-color: red;
    width: 150px;
    margin-left: -100%;
    height: 50px;

}

#div-right-02 {
    float: left;
    position: relative;
    background-color: yellow;
    width: 200px;
    margin-left: -200px;
    height: 50px;
}

双飞翼能够兼容到 IE6，其可以实现的各种布局在此便不作展开了，有兴趣可以参考玉伯分享的 DEMO

4. 跟上潮流，试试 flex

See the Pen flex-three-columns by xal821792703 (@honoka) on CodePen.

看完了强大的双飞翼布局，是不是已经心急火燎地想亲手试试啦。别急，客官，再听我唠唠 CSS3 的新布局 flex 呗。先让我说明一下上面的 DEMO 中是怎样实现本次实例的：

设计一个弹性容器包裹需定位的三个元素，然后将该弹性容器的排列属性设为水平排列（flex-flow: row）

现在三个元素已经是三列布局了，再将三列元素分别设定一下宽度就行了，左右元素设定为定宽，自适应的中间元素设定为 100%。

.flex {
    display: flex;
    flex-flow: row;
}

#div-left-03 {
    background-color: red;
    width: 150px;
    height: 50px;
}

#div-middle-03 {
    background-color: #fff9ca;
    width: 100%;
    height: 50px;
}

#div-right-03 {
    background-color: yellow;
    width: 200px;
    height: 50px;
}

效果如下图：技术分享

搞定收工！大哥你瞪着我是怎么回事儿？~ 什么？效果不对？我的代码怎么可能不对？！~ 哎呦，别打我，我马上检查（哭）好吧，宽度不对，左右两侧的宽度均不符合设定的定值。什么情况呢？原来在 flex 布局中不能将被定位的元素宽度或高度设定为 100%，这样会影响其他定值大小的元素。那么该如何设置中间元素的宽度呢，flex: 1; 即可，可以试一下 DEMO 中去掉注释与不去掉的区别。
最后简单介绍一下 flex：flex 是 CSS3 的一种弹性容器布局，通过 flex，几行简单的 CSS 语句便可以实现各种布局（对！我就是 flex NC粉~被拍飞~）。那么 flex 有什么缺点呢？对，就是兼容性！
所以在使用 flex 的时候还请注意是否兼容当前浏览器，是否需要 -webkit- 标签。flex 的具体语法和各类实例因为篇(lan)幅(de)过(xie)多的原因，也不做过多介绍了，可以参考阮一峰老师的博文：