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

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

news 文章来源：https://blog.csdn.net/weixin_45980065/article/details/145421287 2025/5/23 1:13:21

文章目录

  • 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

Redis持久化的两种方式：RDB和AOF

redis中的数据存储在缓存中&#xff0c;如果没有持久化的策略&#xff0c;Redis一旦宕机&#xff0c;那么将会导致数据丢失&#xff1b;因此redis提供了以下两种持久化方式&#xff1a;RDB和AOF 一般来说&#xff0c;大部分公司对这两种方式都是同时开启的 一、RDB RDB策略全…...

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

每日一题——131.分割回文串

题目链接&#xff1a;131. 分割回文串 - 力扣&#xff08;LeetCode&#xff09; 代码&#xff1a; class Solution { private:vector<vector<string>> result;vector<string> path;void backtracking (const string& s,int startindex){if(startindex …...

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

内容中台赋能人工智能技术提升业务创新能力

内容概要 在当今快速变化的市场环境中&#xff0c;企业需要不断寻求创新以保持竞争力。内容中台作为一种新型的内容管理架构&#xff0c;能够极大地提升企业在内容创建、管理和分发方面的效率。通过与人工智能技术的深度融合&#xff0c;企业能够将海量的数据和信息转化为有价…...

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

第七节 文件与流

基本的输入输出&#xff08;iostream&#xff09; C标准库提供了一组丰富的输入/输出功能&#xff0c;C的I/O发生在流中&#xff0c;流是字节序列。如果字节流是从设备&#xff08;键盘、磁盘驱动器、网络连接等&#xff09;流向内存&#xff0c;叫做输入操作。如果字节流是从…...

编程日记 2025/2/10 8:13:27

软件工程 项目管理

软件项目管理中可以分成两部分: 软件创新 软件项目管理项目是定义明确的任务&#xff0c;这是为了实现某个目标&#xff08;例如&#xff0c;软件开发和交付&#xff09;进行的一系列操作的集合。一个项目可以表征为: 每个项目都可以有一个独特而鲜明的目标。 项目不是日常活…...

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

通过类加载和初始化的一些题目理解Java类加载过程

通过题目重点理解&#xff1a;Class加载流程和运行时区域 目录 子类和父类static变量父子类加载顺序2class.forName初始化 子类和父类static变量 class Parent {static int a 1;static int b 2;static int c;static {c 3;System.out.println("parent static block&quo…...

编程日记 2025/2/10 8:08:22

LLMs之DeepSeek r1：TinyZero的简介、特点、安装和使用方法、案例应用Logic-RL的简介、安装和使用方法、案例应用之详细攻略

LLMs之DeepSeek r1&#xff1a;TinyZero的简介、特点、安装和使用方法、案例应用Logic-RL的简介、安装和使用方法、案例应用之详细攻略 目录 TinyZero的简介 1、TinyZero的特点 TinyZero的安装和使用方法 1、安装 创建 conda 环境 数据准备 (倒计时任务) 多GPU (适用于 …...

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

爬取豆瓣电影 Top250 数据的脚本及调整方法

以下是一个完整的 Python 脚本，用于爬取豆瓣电影 Top250 的数据，包括电影名称、评分和短评。同时，我将提供应对豆瓣页面结构更新和反爬虫机制的调整方法。 安装必要的库 首先，确保安装了必要的库： bash复制 pip install requests beautifulsoup4 pandas示例代码 Pyth…...

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

Deepseek 接入Word处理对话框（隐藏密钥）

硅基流动邀请码&#xff1a;1zNe93Cp 邀请链接&#xff1a;网页链接 亲测deepseek接入word&#xff0c;自由调用对话&#xff0c;看截图有兴趣的复用代码&#xff08;当然也可以自己向deepseek提问&#xff0c;帮助你完成接入&#xff0c;但是提问逻辑不一样给出的答案是千差万…...

编程日记 2025/2/10 7:53:04

Jupyter Notebook自动保存失败等问题的解决

一、未生成配置文件 需要在命令行中&#xff0c;执行下面的命令自动生成配置文件 jupyter notebook --generate-config 执行后会在 C:\Users\用户名\.jupyter目录中生成文件 jupyter_notebook_config.py 二、在网页端打开Jupyter Notebook后文件保存失败&#xff1b;运行代码…...

编程日记 2025/2/10 7:52:03