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

两栏布局、三栏布局、水平垂直居中

news 2025/11/4 22:19:00

文章目录

  • 1 两栏布局
    • 1.1 浮动 + margin
    • 1.2 浮动 + BFC
    • 1.3 flex布局
    • 1.4 左绝父相 + margin
    • 1.5 右绝父相 + 方向定位
  • 2 三栏布局
    • 2.1 子绝父相 + margin
    • 2.2 flex布局
    • 2.3 浮动 + margin
    • 2.4 圣杯布局
    • 2.5 双飞翼布局
  • 3 水平垂直居中
    • 3.1 绝对定位 + translate
    • 3.2 绝对定位 + margin
    • 3.3 绝对定位 + margin
    • 3.4 flex布局

1 两栏布局

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应。

1.1 浮动 + margin

利用浮动，将左边元素宽度设置为200px，并且设置向左浮动，将右边元素的margin-left设置为200px，宽度设置为auto，撑满整个父元素。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>两栏布局1</title><style>     .left {float: left;width: 200px;height: 100px;background: tomato;}.right {margin-left: 200px;width: auto;height: 100px;background: gold;}</style>
</head><body><div class="outer"><div class="left"></div><div class="right"></div></div>
</body></html>

1.2 浮动 + BFC

利用浮动，左侧元素设置固定大小，并且设置向左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>两栏布局2</title><style>.left {float: left;width: 100px;height: 200px;background: tomato;}.right {overflow: hidden;height: 200px;background: gold;}</style>
</head><body><div class="outer"><div class="left"></div><div class="right"></div></div>
</body></html>

1.3 flex布局

利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex: 1;。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>两栏布局3</title><style>.outer {display: flex;height: 100px;}.left {width: 200px;background: tomato;}.right {flex: 1;background: gold;}</style>
</head><body><div class="outer"><div class="left"></div><div class="right"></div></div>
</body></html>

1.4 左绝父相 + margin

利用绝对定位，将父级元素设置为相对定位。左边元素设置为绝对定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>两栏布局4</title><style>.outer {position: relative;height: 100px;}.left {position: absolute;width: 200px;height: 100px;background: tomato;}.right {margin-left: 200px;height: 100px;background: gold;}</style>
</head><body><div class="outer"><div class="left"></div><div class="right"></div></div>
</body></html>

1.5 右绝父相 + 方向定位

利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>两栏布局5</title><style>.outer {position: relative;height: 100px;}.left {width: 200px;height: 100px;background: tomato;}.right {position: absolute;top: 0;right: 0;bottom: 0;left: 200px;background: gold;}</style>
</head><body><div class="outer"><div class="left"></div><div class="right"></div></div>
</body></html>

2 三栏布局

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局。

2.1 子绝父相 + margin

利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三栏布局1</title><style>.outer {position: relative;height: 100px;}.left {position: absolute;width: 100px;height: 100px;background: tomato;}.right {position: absolute;top: 0;right: 0;width: 200px;height: 100px;background: gold;}.center {margin-left: 100px;margin-right: 200px;height: 100px;background: lightgreen;}</style>
</head><body><div class="outer"><div class="left"></div><div class="center"></div><div class="right"></div></div>
</body></html>

2.2 flex布局

利用flex布局，左右两栏设置固定大小，中间一栏设置为flex: 1;。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三栏布局2</title><style>.outer {display: flex;height: 100px;}.left {width: 100px;background: tomato;}.right {width: 100px;background: gold;}.center {flex: 1;background: lightgreen;}</style>
</head><body><div class="outer"><div class="left"></div><div class="center"></div><div class="right"></div></div>
</body></html>

2.3 浮动 + margin

利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三栏布局3</title><style>.outer {height: 100px;}.left {float: left;width: 100px;height: 100px;background: tomato;}.right {float: right;width: 200px;height: 100px;background: gold;}.center {height: 100px;margin-left: 100px;margin-right: 200px;background: lightgreen;}</style>
</head><body><div class="outer"><div class="left"></div><div class="right"></div><div class="center"></div></div>
</body></html>

2.4 圣杯布局

利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三栏布局4--圣杯布局</title><style>.outer {height: 100px;padding-left: 100px;padding-right: 200px;}.left {float: left;margin-left: -100%;position: relative;left: -100px;width: 100px;height: 100px;background: tomato;}.right {float: right;margin-left: -200px;position: relative;left: 200px;width: 200px;height: 100px;background: gold;}.center {float: left;width: 100%;height: 100px;background: lightgreen;}</style>
</head><body><div class="outer"><div class="center"></div><div class="left"></div><div class="right"></div></div>
</body></html>

2.5 双飞翼布局

双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的padding来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三栏布局5--双飞翼布局</title><style>.outer {height: 100px;}.left {float: left;margin-left: -100%;width: 100px;height: 100px;background: tomato;}.right {float: left;margin-left: -200px;width: 200px;height: 100px;background: gold;}.wrapper {float: left;width: 100%;height: 100px;background: lightgreen;}.center {margin-left: 100px;margin-right: 200px;height: 100px;}</style>
</head><body><div class="outer"><div class="wrapper"><div class="center"></div></div><div class="left"></div><div class="right"></div></div>
</body></html>

3 水平垂直居中

3.1 绝对定位 + translate

利用绝对定位，先将元素的左上角通过top: 50%;和left: 50%;定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平垂直居中1</title><style>.parent {position: relative;width: 200px;height: 200px;background: gold;}.child {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 100px;height: 100px;background: tomato;}</style>
</head><body><div class="parent"><div class="child"></div></div>
</body></html>

3.2 绝对定位 + margin

利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平垂直居中2</title><style>.parent {position: relative;width: 200px;height: 200px;background: gold;}.child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 100px;height: 100px;background: tomato;}</style>
</head><body><div class="parent"><div class="child"></div></div>
</body></html>

3.3 绝对定位 + margin

利用绝对定位，先将元素的左上角通过top: 50%;和left: 50%;定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平垂直居中3</title><style>.parent {position: relative;width: 200px;height: 200px;background: gold;}.child {position: absolute;top: 50%;left: 50%;width: 100px;height: 100px;margin-top: -50px;margin-left: -50px;background: tomato;}</style>
</head><body><div class="parent"><div class="child"></div></div>
</body></html>

3.4 flex布局

使用flex布局，通过align-items: center;和justify-content: center;设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平垂直居中4</title><style>.parent {display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;background: gold;}.child {width: 50px;height: 50px;background: tomato;}</style>
</head><body><div class="parent"><div class="child"></div><div class="child"></div></div>
</body></html>

相关文章：

两栏布局、三栏布局、水平垂直居中

文章目录 1 两栏布局1.1 浮动 margin1.2 浮动 BFC1.3 flex布局1.4 左绝父相 margin1.5 右绝父相 方向定位 2 三栏布局2.1 子绝父相 margin2.2 flex布局2.3 浮动 margin2.4 圣杯布局2.5 双飞翼布局 3 水平垂直居中3.1 绝对定位 translate3.2 绝对定位 margin3.3 绝对定位…...

编程日记 2025/2/10 9:00:19

Hanoi （ 2022 ICPC Southeastern Europe Regional Contest ）

Hanoi &#xff08; 2022 ICPC Southeastern Europe Regional Contest &#xff09; The original problem “Towers of Hanoi” is about moving n n n circular disks of distinct sizes between 3 3 3 rods. In one move, the player can move only the top disk from on…...

编程日记 2025/2/10 8:58:17

Matplotlib基础01（ 基本绘图函数/多图布局/图形嵌套/绘图属性）

Matplotlib基础 Matplotlib是一个用于绘制静态、动态和交互式图表的Python库&#xff0c;广泛应用于数据可视化领域。它是Python中最常用的绘图库之一&#xff0c;提供了多种功能&#xff0c;可以生成高质量的图表。 Matplotlib是数据分析、机器学习等领域数据可视化的重要工…...

编程日记 2025/2/10 8:57:16

SMU寒假训练第二周周报

训练情况 本周是第二周&#xff0c;训练情况比第一周好一点点&#xff0c;也仅仅是好一点点&#xff0c;经过春节以及后遗症&#xff0c;牛客更是打的稀烂&#xff0c;还不如去年&#xff0c;都不知道自己在干嘛&#xff0c;训练赛情况也非常糟糕&#xff0c;还要去搞社会实践…...

编程日记 2025/2/10 8:56:15

解锁全新视界：一键畅享 360 度全景图与多格式转换

软件介绍 各位朋友&#xff0c;大家好&#xff01;今天要给大家引荐一款超实用的全景图转换“神器”——Pano2VR Pro 的最新版本。在当今这个追求极致视觉体验的时代&#xff0c;它宛如一把神奇的钥匙&#xff0c;能够解锁全新的视觉领域&#xff0c;将平平无奇的不同角度图像…...

编程日记 2025/2/10 8:55:14

python:面向对象案例烤鸡翅

自助烤鸡翅的需求&#xff1a; 1.烤鸡翅的时间和对应的状态&#xff1a; 0-4min :生的 4-7min:半生不熟 7-12min&#xff1a;熟了 12min以上&#xff1a;烤糊了 2.添加调料&#xff1a; 客户根据自己的需求添加 定义烤鸡翅的类、属性和方法&#xff0c;显示对象的信息 …...

编程日记 2025/2/10 8:53:11

游戏外挂原理解析：逆向分析与DLL注入实战（植物大战僵尸

目录 1.前言2.外挂类型3.前置知识4.CE查找基质4.1 逐步分析4.2 暴力搜索5.实现数值外挂6.dll导入表注入7.实现行为外挂（无敌类型）8.源码下载与外挂进阶本篇原文为：游戏外挂原理解析：逆向分析与DLL注入实战（植物大战僵尸）。 更多C++进阶、rust、python、逆向等等教程，可…...

编程日记 2025/2/10 8:51:09

【10.10】队列-设计自助结算系统

一、题目 请设计一个自助结账系统&#xff0c;该系统需要通过一个队列来模拟顾客通过购物车的结算过程&#xff0c;需要实现的功能有&#xff1a; get_max()&#xff1a;获取结算商品中的最高价格&#xff0c;如果队列为空&#xff0c;则返回 -1add(value)&#xff1a;将价格为…...

编程日记 2025/2/10 8:48:06

android的ViewModel和LiveData 简介

ViewModel ViewModel 的优势 ViewModel 的替代方案是保存要在界面中显示的数据的普通类。在 activity 或 Navigation 目的地之间导航时&#xff0c;这可能会造成问题。此时&#xff0c;如果您不利用保存实例状态机制存储相应数据&#xff0c;系统便会销毁相应数据。ViewModel…...

编程日记 2025/2/10 8:45:03

Linux系统之free命令的基本使用

Linux系统之free命令的基本使用 一、free命令介绍二、free命令的使用帮助2.1 free命令的帮助信息2.2 free命令帮助解释 三、free命令的基本使用3.1 显示内存使用情况3.2 新增总计条目3.3 显示内存详细信息 四、注意事项 一、free命令介绍 free 命令是 Linux 系统中用于显示系统…...

编程日记 2025/2/10 8:43:59

大模型赋能网络安全整体应用流程概述

一、四个阶段概述 安全大模型的应用大致可以分为四个阶段： 阶段一主要基于开源基础模型训练安全垂直领域的模型； 阶段二主要基于阶段一训练出来的安全大模型开展推理优化、蒸馏等工序，从而打造出不同安全场景的专家模型，比如数据安全领域、安全运营领域、调用邮件识别领…...

编程日记 2025/2/10 8:42:58

SpringCloud - Nacos注册/配置中心

前言 该博客为Nacos学习笔记&#xff0c;主要目的是为了帮助后期快速复习使用 学习视频&#xff1a;7小快速通关SpringCloud 辅助文档&#xff1a;SpringCloud快速通关 一、简介 Nacos官网&#xff1a;https://nacos.io/docs/next/quickstart/quick-start/ Nacos /nɑ:kəʊ…...

编程日记 2025/2/10 8:41:57

面试准备——Java理论高级【笔试，面试的核心重点】

集合框架 Java集合框架是面试中的重中之重&#xff0c;尤其是对List、Set、Map的实现类及其底层原理的考察。 1. List ArrayList&#xff1a; 底层是动态数组&#xff0c;支持随机访问&#xff08;通过索引&#xff09;&#xff0c;时间复杂度为O(1)。插入和删除元素时&#…...

编程日记 2025/2/10 8:40:56

AI伴读-清华大学104页《DeepSeek：从入门到精通》

辅助工具&#xff1a;deepseek、豆包AI伴读 官网&#xff1a;DeepSeekDeepSeek, unravel the mystery of AGI with curiosity. Answer the essential question with long-termism.https://www.deepseek.com/https://www.deepseek.com/清华大学104页《DeepSeek&#xff1a;从入…...

编程日记 2025/2/10 8:39:55

unity学习34：角色相关3，触发器trigger，铰链 hingejoint 等 spring joint, fixed joint

目录 1 触发的实现条件 1.1 碰撞的的实现条件 1.2 触发的实现条件 1.3 触发器trigger&#xff0c;直接拿 碰撞器collider修改下配置即可 2 触发器相关实验&#xff1a;触发开门效果 2.0 目标 2.1 player物体的属性 2.2 新建一个trigger 物体 2.3 新建一个被trigger 控…...

编程日记 2025/2/10 8:38:54

HarmonyOS Next 方舟字节码文件格式介绍

在开发中&#xff0c;可读的编程语言要编译成二进制的字节码格式才能被机器识别。在HarmonyOS Next开发中&#xff0c;arkts会编译成方舟字节码。方舟字节码长什么样呢&#xff1f;我们以一个demo编译出的abc文件&#xff1a; 二进制就是长这样&#xff0c;怎么去理解呢&…...

编程日记 2025/2/10 8:37:52

计算机视觉语义分割——Attention U-Net(Learning Where to Look for the Pancreas)

计算机视觉语义分割——Attention U-Net(Learning Where to Look for the Pancreas) 文章目录 计算机视觉语义分割——Attention U-Net(Learning Where to Look for the Pancreas)摘要Abstract一、Attention U-Net1. 基本思想2. Attention Gate模块3. 软注意力与硬注意力4. 实验…...

编程日记 2025/2/10 8:36:51

html 列动态布局

样式说明&#xff1a; /* 列动态布局&#xff0c;列之间以空格填充 */ li {display: flex;/* flex-direction: column; */justify-content: space-between; }...

编程日记 2025/2/10 8:31:46

DeepSeek开源多模态大模型Janus-Pro部署

DeepSeek多模态大模型部署 请自行根据电脑配置选择合适环境配置安装conda以及gitJanus 项目以及依赖安装运行cpu运行gpu运行 进入ui界面 请自行根据电脑配置选择合适 本人家用电脑为1060&#xff0c;因此部署的7B模型。配置高的可以考虑更大参数的模型。 环境配置 安装conda…...

编程日记 2025/2/10 8:18:33

DeepSeek结合Langchain的基本用法

DeepSeek结合Langchain的基本用法 DeepSeek 基于Openai接口规范的Prompt应答Deepseek结合LangchainDeepSeek 基于langchain的结构化返回 DeepSeek 基于Openai接口规范的Prompt应答 首先我们需要先基于pip 安装 pip install openai最开始我们先熟悉如何使用openai的接口规范&a…...

编程日记 2025/2/10 8:17:32

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2025/11/4 13:36:56

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/11/3 19:37:43

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2025/11/1 0:21:42

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2025/11/1 22:53:57

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2025/11/2 22:52:17

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2025/11/1 20:38:11

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/11/2 1:18:26

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2025/11/3 13:24:55

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/9/5 21:18:15

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2025/10/25 7:56:52