实现三栏布局的十种方式

news2024/12/23 18:24:37

本文节选自我的博客：实现三栏布局的十种方式

  • 💖 作者简介：大家好，我是MilesChen，偏前端的全栈开发者。
  • 📝 CSDN主页：爱吃糖的猫🔥
  • 📣 我的博客：爱吃糖的猫
  • 📚 Github主页: MilesChen
  • 🎉 支持我：点赞👍+收藏⭐️+留言📝
  • 💬介绍：The mixture of WEB+DeepLearning+Iot+anything🍁

前言

实现三栏布局也是一道经典的面试题，如果你能侃侃而谈这十种实现三栏布局的方式，一定会令面试官眼前一亮。三栏布局即左右固定中间伸缩，将三栏布局的方式按照中间栏的渲染顺序可以分为三种：float实现的三种（中间栏最后渲染），flex、grid、绝对定位实现的三种（中间栏中间渲染），双飞翼圣杯实现的四种（中间栏最后渲染）

float实现的三种

float实现的方式优点是兼容性好；缺点是需要将中间栏放在最后渲染，网速慢的情况下可能会影响用户体验。

float+BFC

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>CSS实现三栏布局</title>
		<style type="text/css">
            /* 方法1 浮动+BFC 左右元素固定宽度，向左右浮动 中间元素不设置宽度，会自动撑满，重叠问题可使用构造BFC解决 */
            /* 注意HTML标签中需要将 中间元素放在最后显示，这会导致问题，中间内容后显示 */
            .left{
                float: left;
                width: 100px;
                background-color: aqua;
            }
            .middle{
                overflow: hidden;
                height: 200px;
                background-color: green;
            }
            .right{
                float: right;
                width: 100px;
                background-color: aqua;
            }
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left">左栏</div>
			<div class="right">右栏</div>
            <div class="middle">中间栏</div>
		</div>
	</body>
</html>

float+margin

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>CSS实现三栏布局</title>
		<style type="text/css">
            /* 方法2 浮动+margin 和两栏比较法二很像，左右元素固定宽度，向左右浮动 中间元素不设置宽度，会自动撑满，重叠问题可使用margin解决 */
            /* 注意HTML标签中需要将 中间元素放在最后显示，这会导致问题，中间内容后显示 */
            .left{
                float: left;
                width: 100px;
                background-color: aqua;
            }
            .middle{
                margin:0 100px;
                height: 200px;
                background-color: green;
            }
            .right{
                float: right;
                width: 100px;
                background-color: aqua;
            }
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left">左栏</div>
			<div class="right">右栏</div>
            <div class="middle">中间栏</div>
		</div>
	</body>
</html>

float+calc()

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>CSS实现三栏布局</title>
		<style type="text/css">
            /* 方法3 浮动+calc() 先使用浮动将三栏水平排列，然后对中间栏使用calc()函数来计算去除左右两栏固定宽度后剩余的宽度。*/
            div {
                height: 100px;
            }
            .left {
                float: left;
                width: 200px;
                background-color: red;
            }
            .middle {
                float: left;
                width: calc(100% - 400px);
                background-color: green;
            }
            .right {
                float: right;
                width: 200px;
                background-color: blue;
            }
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left">左栏</div>
			<div class="right">右栏</div>
			<div class="middle">中间栏</div>
		</div>
	</body>
</html>

flex、grid、绝对定位实现的三种

这三种方式都是将中间栏放在中间渲染。

flex

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>CSS实现三栏布局</title>
		<style type="text/css">
            /* 方法4 flex 直接给中间设置flex 1 左右固定宽度 */
            /* 优点是特别简单 缺点是依赖flex的兼容性 */
			.container {
				display: flex;
			}
			.left {
				width: 200px;
				height: 200px;
				background: red;
			}
			.middle {
				height: 200px;
				background: yellow;
				flex: 1;
			}
			.right {
				width: 200px;
				height: 200px;
				background: blue;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left">左栏</div>
            <div class="middle">中间栏</div>
			<div class="right">右栏</div>
		</div>
	</body>
</html>

grid

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>CSS实现三栏布局</title>
		<style type="text/css">
            /* 方法5 网格 利用grid布局的方式，左右两栏设置固定宽度，中间一栏设置为auto*/
            /* 核心代码：grid-template-columns 左栏固定宽度 中间自适应宽度 右栏固定宽度*/
            div {
                height: 100px;
            }
            .container {
                display: grid;
                grid-template-columns: 200px auto 200px;
            }
            .left {
                background: red;
            }
            .middle {
                background: green;
            }
            .right {
                background: blue;
            }
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left">左栏</div>
            <div class="middle">中间栏</div>
			<div class="right">右栏</div>
		</div>
	</body>
</html>

绝对定位

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>CSS实现三栏布局</title>
		<style type="text/css">
            /* 方法6 子绝父相：三栏全部绝对定位；中间栏left: 200px;right: 200px;保持伸缩居中 */
            .container {
                position: relative;
            }
            .left {
                position: absolute;
                left: 0;
                width: 200px;
                background-color: red;
            }
            .middle {
                position: absolute;
                left: 200px;
                right: 200px;
                background-color: green;
            }
            .right {
                position: absolute;
                right: 0;
                width: 200px;
                background-color: blue;
            }
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left">左栏</div>
            <div class="middle">中间栏</div>
			<div class="right">右栏</div>
		</div>
	</body>
</html>

双飞翼圣杯实现的四种

这四种方式都是将中间栏放在最前面渲染，保证中间栏最先渲染。

felx实现圣杯双飞翼效果

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>CSS实现三栏布局</title>
		<style type="text/css">
            /* 方法7:使用flex实现圣杯、双飞翼的效果, 使用 order 调整flex顺序  使中间块最先加载*/
            .container {
                display: flex;
            }
            .middle {
                flex: 1;
                background-color: red;
            }
            .left {
                width: 200px;
                order: -1;
                background-color: aqua;
            }
            .right {
                width: 200px;
                order: 1;
                background-color: bisque;
            }
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left">左栏</div>
			<div class="right">右栏</div>
            <div class="middle">中间栏</div>
		</div>
	</body>
</html>

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS实现三栏布局</title>
    <style>
         * {
            margin: 0;
            padding: 0;
        }
        /* 给container栏添加padding，左右栏使用相对定位移上去。利用浮动，外边距负值和相对定位来实现。 */
        .container {
            height: 100px;
            padding: 0 200px;
        }
        .middle,.left,.right{
            float: left;
            height: 100%;
        }
        .middle {
            width: 100%;
            background: rgb(100, 105, 100);
        }
        .left {
            position: relative;
            width: 200px;
            background: pink;
            left: -200px;
            /* float后的元素可以使用 margin-left: -100%; 切换到上一行起始位置*/
            margin-left: -100%;
        }
        .right {
            position: relative;
            width: 200px;
            background: pink;
            /* 第一种写法 */
            margin-left: -200px;
            left:200px;
            /* 第二中写法 */
            /* margin-right: -200px; */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

注意：圣杯布局中间列的宽度不能小于两边任意列的宽度，而双飞翼布局则不存在这个问题。
父级padding+子绝父相+负边距：三栏都使用float：left；父级标签padding: 0 200px; ，结合下面这张图理解

将left和right使用子绝父相，再调整定位的方式弄上去
左边：margin-left: -100%;（切换到上一行起始位置）left: -200px;（相对定位，向左移动200px）
右边：margin-left: -200px;（向左移动一个身位，移动到middle的右侧）left:200px; （向右移动200px）
还有种方法也能挤上去：margin-right: -200px；

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS实现三栏布局</title>
    <style>
        .container {
            overflow: hidden;
            height: 200px;
        }
        /* 中间栏的子标签margin+左右负边距 */
        .middle,.left,.right {
            float: left;
            height: 100px;
        }
        .middle {
            width: 100%;
            background-color: aqua;
        }
        .inner {
            margin: 0 200px;
            height: 100px;
            background-color: green;
        }
        .left {
            width: 200px;
            margin-left: -100%;
            background-color: red;
        }
        .right {
            width: 200px;
            margin-left: -200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="middle">
            <div class="inner">中间</div>
        </div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
</body>
</html>

中间栏的子标签margin+左右负边距：三栏都使用float：left；中间栏子标签margin: 0 200px; HTML中将中间栏放前面；结合下面这张图去理解

双飞翼圣杯复合写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS实现三栏布局</title>
    <style>
        /* 双飞翼与圣杯布局的结合写法，这一种直接在中间栏加padding，然后将左右栏 添加margin-left移动上去 */
        /* middle要使用内减模式 不然会多出一块区域 */
        .container {
            height: 100px;
        }
        .middle,.left,.right{
            float: left;
            height: 100%;
        }
        .middle {
            box-sizing: border-box;
            width: 100%;
            background: rgb(100, 105, 100);
            padding: 0 200px;
        }
        .left {
            width: 200px;
            background: pink;
            margin-left: -100%;
        }
        .right {
            width: 200px;
            background: pink;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

中间标签内减模式padding+负数边距：三栏都使用float：left；中间栏标签padding: 0 200px; 且要设置box-sizing: border-box;左边：margin-left: -100%;右边：margin-left: -200px;

总结

  1. float+BFC：左右两栏float到左右；中间 overflow: hidden; 清除浮动显示第二栏 ；注意：HTML需要将中间块放在right之后；
  2. float+margin：左右两栏float到左右；中间设置margin-left和margin-right；注意：HTML需要将中间块放在right之后；
  3. float+calc() ：先使用浮动将三栏水平排列，然后对中间栏使用calc(100% - 400px);来计算去除左右两栏宽度后剩余的宽度；
  4. flex；将中间设定值为1，最简单的方式；
  5. grid：display: grid;grid-template-columns: 200px auto 200px;左右两栏固定宽度，中间自适应宽度；
  6. 子绝父相：三栏全部绝对定位；中间栏left: 200px;right: 200px;保持伸缩居中
  7. felx实现圣杯双飞翼效果：left {order: -1;} right{order: 1;} 中间块默认为0；所以显示顺序了-1、0、1；
  8. 圣杯布局：父级padding+子绝父相+负边距；
  9. 双飞翼布局：中间栏的子标签margin+左右负边距；
  10. 双飞翼圣杯复合写法：中间标签内减模式padding+负数边距。

感谢小伙伴们的耐心观看，本文为笔者个人学习记录，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1054600.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Mysql技术文档--之Mysql联查使用-快速了解联查看我这一篇就够了！国庆开卷！

Mysql技术文档--之Mysql联查使用-快速了解联查看我这一篇就够了！国庆开卷！

阿丹&#xff1a; 开头先祝贺大家国庆快乐&#xff01;&#xff01;&#xff01; 在MySQL中&#xff0c;联结&#xff08;JOIN&#xff09;是用于将两个或多个表中的数据根据指定的条件进行关联查询的操作。通过联结&#xff0c;你可以从多个表中检索相关的数据&#xff0c;并…
阅读更多...
市场调研的步骤与技巧：助你了解市场需求

市场调研的步骤与技巧：助你了解市场需求

在当今快速发展的市场中&#xff0c;进行有效的市场研究对于了解消费者的行为、偏好和趋势至关重要。适当的市场研究可以帮助公司获得对目标受众的有价值的见解&#xff0c;创造更好的产品和服务&#xff0c;并提高客户满意度。今天&#xff0c;小编和大家一起讨论一下怎么做市…
阅读更多...
10.1 今日任务：select实现服务器并发

10.1 今日任务：select实现服务器并发

#include <myhead.h>#define ERR_MSG(msg) do{\fprintf(stderr, "__%d__:", __LINE__); \perror(msg);\ }while(0)#define PORT 8888 //端口号&#xff0c;范围1024~49151 #define IP "192.168.112.115" //本机IP&#xff0c;ifco…
阅读更多...
[Linux] 4.常用初级指令

[Linux] 4.常用初级指令

pwd&#xff1a;显示当前文件路径 ls:列出当前文件夹下有哪些文件 mkdir空格文件名&#xff1a;创建一个新的文件夹 cd空格文件夹名&#xff1a;进入文件夹 cd..&#xff1a;退到上一层文件夹 ls -a&#xff1a;把所有文件夹列出来 .代表当前文件夹 ..代表上层文件夹 用…
阅读更多...
第 365 场 LeetCode 周赛题解

第 365 场 LeetCode 周赛题解

A 有序三元组中的最大值 I 参考 B B B 题做法… class Solution { public:using ll long long;long long maximumTripletValue(vector<int> &nums) {int n nums.size();vector<int> suf(n);partial_sum(nums.rbegin(), nums.rend(), suf.rbegin(), [](int x…
阅读更多...
Facebook Delos 中的虚拟共识协议

Facebook Delos 中的虚拟共识协议

背景 Facebook 的软件系统栈一般包括两层&#xff1a;上层是数据平面&#xff0c; 下层是控制平面。 facebook software stack 数据平面包括大量的服务&#xff0c;他们需要存储和处理海量数据。控制平面用来支撑数据平面&#xff0c;起到一些控制作用&#xff1a;调度、配置…
阅读更多...
XSS-labs

XSS-labs

XSS常见的触发标签_xss标签_H3rmesk1t的博客-CSDN博客 该补习补习xss漏洞了 漏洞原理 网站存在 静态 和 动态 网站 xss 针对的网站 就是 动态网站 动态网站会根据 用户的环境 与 需求 反馈出 不同的响应静态页面 代码写死了 只会存在代码中有的内容 通过动态网站 用户体…
阅读更多...
2023年中国火化设备行业现状分析：随着城市化进程的推进，市场需求将持续增长[图]

2023年中国火化设备行业现状分析：随着城市化进程的推进，市场需求将持续增长[图]

火化设备行业是指生产和提供用于尸体火化处理的设备和相关服务的行业。火化设备主要用于将尸体进行高温焚烧&#xff0c;将尸体转化为骨灰&#xff0c;以达到尸体处理和殡葬的目的。 火化设备行业优点 资料来源&#xff1a;共研产业咨询&#xff08;共研网&#xff09; 我国火…
阅读更多...
C++面试八股(一)

C++面试八股(一)

目录 C和C的区别 1、语言特性 2、内存管理 3、C的库更加丰富 4、对异常的处理 什么是封装继承多态&#xff1f; 封装 继承 多态 new和malloc的区别 STL容器有哪些&#xff1f;容器对应的使用场景&#xff1f;&#xff08;挑一个你认为最熟悉的容器&#xff09; vector、…
阅读更多...
评估指标Pre\Rec\F1\AUC

评估指标Pre\Rec\F1\AUC

AUC的计算方法同时考虑了分类器对于正例和负例的分类能力&#xff0c;在样本不平衡的情况下&#xff0c;依然能够对分类器作出合理的评价。AUC代表模型预估样本之间的排序关系&#xff0c;即正负样本之间预测的gap越大&#xff0c;auc越大. 来自 https://blog.csdn.net/pearl8…
阅读更多...
wustctf2020_name_your_cat

wustctf2020_name_your_cat

wustctf2020_name_your_cat Arch: i386-32-little RELRO: Partial RELRO Stack: Canary found NX: NX enabled PIE: No PIE (0x8048000)32位&#xff0c;开了NX和canary int shell() {return system("/bin/sh"); }有个后门函数 unsigned int…
阅读更多...
AutoHotkey ---- 统一所有软件的快捷键(分析篇)

AutoHotkey ---- 统一所有软件的快捷键(分析篇)

文章目录 引言理论编程方案 引言 快捷键大家都不陌生.但是目前的快捷键普遍存在以下几个问题。 不统一,即word、ppt、浏览器、各种编辑器、邮件客户端等等&#xff0c;都有属于自己的一套快捷键。快捷键冲突&#xff0c;即不同软件使用了相同的快捷键&#xff0c;而且作用域是…
阅读更多...
GNN PyG~torch_geometric 学习理解

GNN PyG~torch_geometric 学习理解

目录 1. PyG Introduction 2. PyG Installation 2.1 PyG 安装常见错误及原因 2.2 PyG 具体安装步骤 3. torch_geometric packages torch_geometric.data.Data Dataset 与 DataLoader Dropout、BatchNorm 3. torch_geometric: 理解edge_index 3.1 理解 mini-batch edg…
阅读更多...
[H5动画制作系列]帧代码运行顺序测试

[H5动画制作系列]帧代码运行顺序测试

刚开始接触Animate CC（过去叫：Flash）,对于帧代码的执行顺序十分迷惑。所以,专门做一个简单代码顺序测试. 准备工作: 代码图层actions，第1帧和第10帧为关键帧。 背景图层bg，就一个字符串红色Test.界面如下: 代码测试步骤: 第1帧参考代码如下: 第10帧参考代码如下: …
阅读更多...
​68条萝卜刀《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书

​68条萝卜刀《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书

​68条萝卜刀《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书 ​68条萝卜刀《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书
阅读更多...
打包python模块代码到pypi

打包python模块代码到pypi

python中&#xff0c;我们会在自己业务中&#xff0c;重复性的使用某些功能。我们可以把这些公用的模块&#xff0c;打包上传&#xff0c;然后给需要的人使用&#xff0c;pypi给我们提供了这个机会 本期目录 一、准备工作 二、编写文件 三、上传下载 一、准备工作 1、需要git…
阅读更多...
k8s实战案例之部署Nginx+Tomcat+NFS实现动静分离

k8s实战案例之部署Nginx+Tomcat+NFS实现动静分离

1、基于镜像分层构建及自定义镜像运行Nginx及Java服务并基于NFS实现动静分离 1.1、业务镜像设计规划 根据业务的不同，我们可以导入官方基础镜像，在官方基础镜像的基础上自定义需要用的工具和环境，然后构建成自定义出自定义基础镜像，后续再基于自定义基础镜像，来构建不同服…
阅读更多...
软件测试之Python基础学习

软件测试之Python基础学习

目录 一、Python基础 Python简介、环境搭建及包管理 Python简介 环境搭建 包管理 Python基本语法 缩进(Python有非常严格的要求) 一行多条语句 断行 注释 变量 基本数据类型(6种) 1. 数字Number 2. 字符串String 3. 列表List 4. 元组Tuple 序列相关操作方法 …
阅读更多...
Unity 鼠标悬浮时文本滚动(Text Mesh Pro)

Unity 鼠标悬浮时文本滚动(Text Mesh Pro)

效果 直接将脚本挂载在Text Mesh Pro上&#xff0c;但是需要滚动的文本必须在Scroll View中&#xff0c;否侧会定位错误&#xff0c;还需要给Scroll View中看需求添加垂直或者水平布局的组件 代码 using System.Collections; using System.Collections.Generic; using UnityE…
阅读更多...
【生物信息学】使用谱聚类（Spectral Clustering）算法进行聚类分析

【生物信息学】使用谱聚类（Spectral Clustering）算法进行聚类分析

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 3. IDE 三、实验内容 0. 导入必要的工具 1. 生成测试数据 2. 绘制初始数据分布图 3. 循环尝试不同的参数组合并计算聚类效果 4. 输出最佳参数组合 5. 绘制最佳聚类结果图 6. 代码整合 一、实验介绍…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023