当前位置：首页 > news >正文

CSS 两栏布局和三栏布局的实现

news 2025/11/4 4:20:38

文章目录

- 一、两栏布局的实现
- - 1. float+margin
  - 2. flaot+BFC
  - 3. 定位+margin
  - 4. flex 布局
  - 5. grid布局
- 二、三栏布局的实现
- - 1. float + margin
  - 2. float + BFC
  - 3. 定位 + margin(或者定位+BFC)
  - 4. flex布局
  - 5. 圣杯布局
  - 6. 双飞翼布局

一、两栏布局的实现

两栏布局其实就是左侧定宽，右侧自适应的布局

1. float+margin

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: flex;height: 300px;}.left {width: 100px;background: red;}.right {flex: 1;background: green;}</style></head><body><div class="container"><div class="left"></div><div class="right"></div></div></body>
</html>

2. flaot+BFC

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: flex;height: 300px;}.left {width: 100px;background: red;}.right {flex: 1;background: green;}</style></head><body><div class="container"><div class="left"></div><div class="right"></div></div></body>
</html>

知识课堂
先来看两个相关的概念:
●Box: Box是CSS布局的对象和基本单位，一个页面是由很多个Box组成的，这个Box就是我们所说的盒模型。
●Formatting context: 块级上下文格式化，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

块格式化上下文(Block Formatting Context, BFC) 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗来讲: BFC是一 -个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

创建BFC的条件:
●根元素: body;
●元素设置浮动: float除none以外的值;
●元素设置绝对定位: position (absolute、 fixed);
●display值为: inline-block、 table-cell、 table-caption、 flex等 ;
●overflow值为: hidden、 auto、 scroll;

BFC的特点:
●垂直方向上，自.上而下排列，和文档流的排列方式-致。
●在BFC中上下相邻的两个容器的margin会重叠
●计算BFC的高度时，需要计算浮动元素的高度
●BFC区域不会与浮动的容器发生重叠
●BFC是独立的容器，容器内部元素不会影响外部元素●每个元素的左margin值和容器的左border相接触

3. 定位+margin

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}.left {position: absolute;left: 0;width: 100px;height: 300px;background: red;}.right {margin-left: 100px;height: 300px;background: green;}</style></head><body><div class="left"></div><div class="right"></div></body>
</html>

4. flex 布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: flex;height: 300px;}.left {width: 100px;background: red;}.right {flex: 1;background: green;}</style></head><body><div class="container"><div class="left"></div><div class="right"></div></div></body>
</html>

5. grid布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: grid;grid-template-columns: 100px 1fr;box-sizing: border-box;height: 300px;}.left {background: red;}.right {background: green;}</style></head><body><div class="container"><div class="left"></div><div class="right"></div></div></body>
</html>

二、三栏布局的实现

左右定宽，中间自适应

1. float + margin

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>CSS实现三栏布局1</title><style type="text/css">.left {width: 200px;height: 300px;background-color: #dc698a;float: left;}.middle {height: 300px;background-color: #8cb08b;margin: 0 200px;}.right {width: 200px;height: 300px;background-color: #3eacdd;float: right;}</style></head><body><div class="left">左栏</div><div class="right">右栏</div><div class="middle">中间栏</div></body>
</html>

2. float + BFC

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>CSS实现三栏布局1</title><style type="text/css">.left {width: 200px;height: 300px;background-color: #dc698a;float: left;}.middle {height: 300px;background-color: #8cb08b;overflow: hidden;}.right {width: 200px;height: 300px;background-color: #3eacdd;float: right;}</style></head><body><div class="left">左栏</div><div class="right">右栏</div><div class="middle">中间栏</div></body>
</html>

注意：上面两种方法都必须先渲染right,否则right会被middle挤下来

3. 定位 + margin(或者定位+BFC)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>CSS实现三栏布局3</title><style type="text/css">.container {position: relative;}.left {width: 200px;height: 300px;background-color: #dc698a;position: absolute;}.middle {height: 300px;background-color: #8cb08b;margin: 0 200px;}.right {position: absolute;right: 0;top: 0;width: 200px;height: 300px;background-color: #3eacdd;}</style></head><body><div class="container"><div class="left">左栏</div><div class="middle">中间栏</div><div class="right">右栏</div></div></body>
</html>

4. flex布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {height: 300px;display: flex;}.left,.right {width: 100px;background: red;}.center {flex: 1;background: green;}</style></head><body><div class="container"><div class="left"></div><div class="center"></div><div class="right"></div></div></body>
</html>

5. 圣杯布局

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Title</title><style>.container {height: 200px;overflow: hidden;padding: 0 200px;}.center {width: 100%;height: 200px;background-color: green;float: left;}.left {width: 200px;height: 200px;background-color: blue;float: left;margin-left: -100%;position: relative;left: -200px;}.right {width: 200px;height: 200px;background-color: darkorchid;float: left;margin-left: -200px;position: relative;right: -200px;}</style></head><body><div class="container"><div class="center"></div><div class="left"></div><div class="right"></div></div></body>
</html>

6. 双飞翼布局

CSS 两栏布局和三栏布局的实现

文章目录一、两栏布局的实现1. floatmargin2. flaotBFC3. 定位margin4. flex 布局5. grid布局二、三栏布局的实现1. float margin2. float BFC3. 定位 margin(或者定位BFC)4. flex布局5. 圣杯布局6. 双飞翼布局一、两栏布局的实现两栏布局其实就是左侧定宽，…...

编程日记 2023/8/20 2:26:46

消息中间件相关面试题

👏作者简介：大家好，我是爱发博客的嗯哼，爱好Java的小菜鸟 🔥如果感觉博主的文章还不错的话，请👍三连支持👍一下博主哦 📝社区论坛：希望大家能加入社区共同进步…...

编程日记 2023/8/20 2:25:44

成集云 | 电子签署集成腾讯云企业网盘 | 解决方案

源系统成集云目标系统方案介绍电子签署是通过电子方式完成合同、文件或其他文件的签署过程。相较于传统的纸质签署，电子签署具有更高效、更便捷、更安全的优势。在电子签署过程中，使用电子签名技术来验证签署者的身份并确保签署文件的完整性。电子…...

编程日记 2023/8/20 2:24:42

提升大数据技能，不再颓废！这6家学习网站是你的利器！

随着国家数字化转型，大数据领域对人才的需求越来越多。大数据主要研究计算机科学和大数据处理技术等相关的知识和技能，从大数据应用的三个主要层面（即数据管理、系统开发、海量数据分析与挖掘）出发，对实际问题进行分析…...

编程日记 2023/8/20 2:23:40

uniapp开发小程序-有分类和列表时，进入页面默认选中第一个分类

一、效果： 如下图所示，进入该页面后，默认选中第一个分类，以及第一个分类下的列表数据。二、代码实现： 关键代码： 进入页面时，默认调用分类的接口，在分类接口里做判断&#xff…...

编程日记 2023/8/20 2:22:39

小程序-uni-app：hbuildx uni-app 安装 uni-icons 及使用

一、官方文档找到uni-icons uni-app官网二、下载插件三、点击“打开HBuildX” 四、选择要安装的项目五、勾选要安装的插件六、安装后，项目插件目录根目录uni_modules目录下增加uni-icons、uni-scss 七、引入组件，使用组件 <uni-icons type&qu…...

编程日记 2023/8/20 2:21:36

PHP中in_array()函数用法详解

in_array() 函数是PHP中常用的数组函数之一，用于搜索数组中是否存在指定的值。语法 bool in_array ( mixed $needle , array $haystack [, bool $strict FALSE ] ) 参数描述needle必需。规定要在数组搜索的值。haystack必需。规定要搜索的数组。strict可选。如…...

编程日记 2023/8/20 2:20:34

热电联产在综合能源系统中的选址定容研究（matlab代码）

目录 1 主要内容目标函数程序模型 2 部分代码 3 程序结果 1 主要内容该程序参考《热电联产在区域综合能源系统中的定容选址研究》，主要针对电热综合能源系统进行优化，确定热电联产机组的位置和容量，程序以33节点电网和17节点热网为例…...

编程日记 2023/8/20 2:19:33

校园网安全风险分析

⒈物理层的安全风险分析网络的物理安全风险主要指网络周边环境和物理特性引起的网络设备和线路的不可用 , 而造成网络系统的不可用。我们在考虑校园网络安全时，首先要考虑物理安全风险，它是整个网络系统安全的前提。物理安全风险有：设备…...

编程日记 2023/8/20 2:18:31

kafka--kafka的基本概念-topic和partition

一、kafka的基本概念-topic和partition 1、topic （主题 ） topic是逻辑概念以Topic机制来对消息进行分类的，同一类消息属于同一个Topic，你可以将每个topic看成是一个消息队列。生产者（producer）将消息发…...

编程日记 2023/8/20 2:17:30

【LVS】3、LVS+Keepalived群集

为什么用它，为了做高可用服务功能 1.故障自动切换 2.健康检查 3.节点服务器高可用-HA Keepalived的三个模块： core：Keepalived的核心，负责主进程的启动、维护；调用全局配置文件进行加载和解析 vrrp：实…...

编程日记 2023/8/20 2:16:27

对前端PWA应用的部分理解和基础Demo

一、什么是PWA应用？ 1、PWA简介渐进式Web应用（Progressive Web App），简称PWA，是 Google 在 2015 年提出的一种使用web平台技术构建的应用程序，官方认为其核心在于Reliable（可靠的&#xf…...

编程日记 2023/8/20 2:15:25

CSGO饰品价格会一直下跌吗？市场何时止跌回升？

最后一届巴黎major终于落下帷幕，Vitality小蜜蜂2-0战胜GL成功赢下本次Major冠军，也是首次夺得Major冠军！有人欢喜有人忧啊，csgo搬砖的饰品商人们一点也高兴不起来。 4月-5月，csgo皮肤饰品已持续走低快两个月了。手里满…...

编程日记 2023/8/20 2:14:22

线程池原理

一、线程池的定义线程池，按照配置参数（核心线程数、最大线程数等）创建并管理若干线程对象，没有任务的时候，这些线程都处于等待空闲状态。如果有新的线程任务，就分配一个空闲线程执行。如果所有线程都处于…...

编程日记 2023/8/20 2:13:19

拷贝构造函数

1. 拷贝构造函数是构造函数的一个重载形式。 2. 拷贝构造函数的参数只有一个且必须是类类型对象的引用，使用传值方式编译器直接报错， 因为会引发无穷递归调用。 class Date { public:Date(int year 1900, int month 1, int day 1){_year year;_mont…...

编程日记 2023/8/20 2:12:17

单机部署 mkdir -p /opt/soft/archive cd /opt/soft/archivewget -i -c https://dev.mysql.com/get/mysql80-community-release-el7-7.noarch.rpm yum install -y mysql80-community-release-el7-7.noarch.rpm yum-config-manager --enable mysql80-community yum install -y …...

编程日记 2023/8/20 2:11:15