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

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

news 2026/3/30 23:27:22

文章目录

  • 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

ReAct让AI像人一样“边想边做”，轻松搞定复杂问题！

写在前面 欢迎回到我们的智能体架构系列。上一期我们聊了工具调用&#xff0c;让智能体“长出了手”&#xff0c;能去外部世界获取信息。但很快我们就发现&#xff0c;光有手还不够。面对“谁是《沙丘》制片公司的CEO&#xff0c;以及该公司最近一部电影的预算&#xff1f;”这…...

编程新知 2026/3/30 23:25:03

高效音频录制实战：如何为你的Web应用选择最佳编码方案

高效音频录制实战&#xff1a;如何为你的Web应用选择最佳编码方案 【免费下载链接】Recorder html5 js 录音 mp3 wav ogg webm amr g711a g711u 格式&#xff0c;支持pc和Android、iOS部分浏览器、Hybrid App&#xff08;提供Android iOS App源码&#xff09;、微信&#xff0c…...

编程新知 2026/3/30 22:21:46

FastAPI类型提示：Self的终极指南：提升代码可读性与维护性的完整教程

FastAPI类型提示&#xff1a;Self的终极指南&#xff1a;提升代码可读性与维护性的完整教程 【免费下载链接】fastapi FastAPI framework, high performance, easy to learn, fast to code, ready for production 项目地址: https://gitcode.com/GitHub_Trending/fa/fastapi …...

编程新知 2026/3/30 22:17:44

如何用OpCore-Simplify轻松搞定黑苹果OpenCore配置？

如何用OpCore-Simplify轻松搞定黑苹果OpenCore配置&#xff1f; 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 你是否曾想过自己动手装一个macOS系统…...

编程新知 2026/3/30 21:43:05

C# 扩展方法只会写 this 吗？C# 14 新语法直接把扩展方法玩出了花

从静态方法到扩展块# 传统的扩展方法需要每个方法都重复写 this 参数&#xff0c;且只能扩展方法。新语法通过 extension 关键字定义一个块&#xff0c;将目标类型集中声明。 传统写法是这样的 public static class StringExtensions {// 每个方法都要写一遍 (this string s…...

编程新知 2026/3/30 20:48:46

别再让用户长按了！用html2canvas在微信H5里优雅生成分享海报（Vue3/TS实战）

微信H5海报生成实战&#xff1a;用html2canvas打造零摩擦分享体验 每次看到用户笨拙地长按屏幕、小心翼翼地调整手指位置就为了保存一张活动海报&#xff0c;作为开发者的你是否感到一丝愧疚&#xff1f;在移动端体验至上的今天&#xff0c;这种原始操作显然与"优雅"…...

编程新知 2026/3/30 20:28:36

原创：黄大年茶思屋难题揭榜第141期｜5道核心题精简公开·未获技术反馈求指正

黄大年茶思屋难题揭榜第141期&#xff5c;5道核心题精简公开未获技术反馈求指正 作者&#xff1a;华夏之光永存 摘要 这五道题我们已完整解题并提交黄大年茶思屋难题揭榜&#xff0c;最终被退回&#xff0c;但平台未给出任何具体技术驳回意见、未指明缺陷、未提供修改方向。我们…...

编程新知 2026/3/30 20:24:28

Qwen3-VL-4B Pro科研绘图生成：根据论文描述反向生成示意图初稿

Qwen3-VL-4B Pro科研绘图生成&#xff1a;根据论文描述反向生成示意图初稿 1. 项目概述 科研工作者经常面临一个痛点&#xff1a;在论文写作过程中&#xff0c;明明有清晰的理论描述和实验方案&#xff0c;却需要花费大量时间绘制专业的示意图。现在&#xff0c;借助Qwen3-VL…...

编程新知 2026/3/30 19:41:47

互联网大厂Java面试实战：严肃面试官与搞笑程序员谢飞机的三轮问答

互联网大厂Java面试实战&#xff1a;严肃面试官与搞笑程序员谢飞机的三轮问答 在互联网大厂Java岗位面试中&#xff0c;面试官不仅考察应聘者的技术深度&#xff0c;更关注其理解业务场景的能力和解决问题的方法。本文通过一场幽默而真实的模拟面试&#xff0c;呈现核心Java与周…...

编程新知 2026/3/30 19:29:30

OpCore Simplify：自动化OpenCore EFI配置的革命性工具

OpCore Simplify&#xff1a;自动化OpenCore EFI配置的革命性工具 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify OpCore Simplify是一款专为Hackinto…...

编程新知 2026/3/30 19:05:03