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

实现两栏布局的五种方式

news 2025/7/3 11:46:35

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

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

前言

实现两栏布局也是一道经典的面试题，两栏布局即左边固定右边伸缩，要实现两栏布局的方式超过十种了，下面举例五种，用来抛砖引玉。

float+BFC

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>两栏布局</title><style>/* 方法1  左元素固定宽度，向左浮动 右元素不设置宽度，会自动撑满，重叠问题可使用BFC解决 *//* float让元素脱离正常标准流控制，不再占有原来的位置，*//* overflow: hidden是关键，也可改成其他能触发BFC均可解决 利用了BFC的特点：`BFC` 的区域不会与浮动元素发生重叠 */.left {width: 200px;height: 100px;background-color: red;float:left;}.right {height: 200px;background-color: blue;overflow: hidden;}</style></head><body ><div class="outer"><div class="left">左侧</div><div class="right">右侧</div></div></body>
</html>

float+margin

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>两栏布局</title><style>/* 方法2  左元素固定宽度，向左浮动 右元素不设置宽度，会自动撑满，使用margin-left */.left {width: 200px;height: 100px;background-color: red;float:left;}.right {height: 200px;background-color: blue;margin-left: 200px;}</style></head><body ><div class="outer"><div class="left">左侧</div><div class="right">右侧</div></div></body>
</html>

flex

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>两栏布局</title><style>/* 方法3 利用 `flex` 布局，左边元素固定宽度，右边的元素设置 `flex: 1` */.outer {display: flex;}.left {width: 200px;height: 100px;background: lightcoral;}.right {flex: 1;height: 200px;background: lightseagreen;}</style></head><body ><div class="outer"><div class="left">左侧</div><div class="right">右侧</div></div></body>
</html>

左侧绝对定位

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>两栏布局</title><style>/* 方法4 *//* 利用绝对定位，父级元素设为相对定位。左边元素 `absolute` 定位，宽度固定。右边元素的 `margin-left` 的值设为左边元素的宽度值。 */.outer {position: relative;}.left {position: absolute;width: 200px;height: 100px;background: lightcoral;}.right {margin-left: 200px;height: 200px;background: lightseagreen;}</style></head><body ><div class="outer"><div class="left">左侧</div><div class="right">右侧</div></div></body>
</html>

右侧绝对定位

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>两栏布局</title><style>/* 方法5 *//* 利用绝对定位，父级元素设为相对定位。左边元素宽度固定，右边元素 `absolute` 定位， `left` 为宽度大小，其余方向定位为 `0` 。 也可以只设置left+top，但要记得设置宽高*/.outer {position: relative;}.left {width: 200px;height: 100px;background: lightcoral;}.right {position: absolute;left: 200px;top: 0;right: 0;bottom: 0;height: 200px;background: lightseagreen;}</style></head><body ><div class="outer"><div class="left">左侧</div><div class="right">右侧</div></div></body>
</html>

总结

  1. float+BFC：第一栏float:left; overflow: hidden; 清除浮动显示第二栏
  2. float+margin：第一栏float:left；给第二栏设置margin-left
  3. flex：将第二栏flex设置为1
  4. 左边绝对定位：第一栏绝地定位；第二栏margin-left
  5. 右边绝对定位：第二栏绝对定位：left为第一栏的宽度；top: 0;left: 200px;right: 0;bottom: 0;

还有其他方式，比如 grid 、float+calc 、table+calc 就不一一举例了。

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

相关文章：

实现两栏布局的五种方式

本文节选自我的博客&#xff1a;实现两栏布局的五种方式 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是MilesChen&#xff0c;偏前端的全栈开发者。&#x1f4dd; CSDN主页&#xff1a;爱吃糖的猫&#x1f525;&#x1f4e3; 我的博客&#xff1a;爱吃糖的猫&…...

编程日记 2023/10/2 18:06:18

博物馆门票预约APP的设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…...

编程日记 2023/10/2 18:05:18

【AI视野·今日Robot 机器人论文速览 第四十四期】Fri, 29 Sep 2023

AI视野今日CS.Robotics 机器人学论文速览 Fri, 29 Sep 2023 Totally 38 papers &#x1f449;上期速览✈更多精彩请移步主页 Interesting: &#x1f4da;NCF,基于Neural Contact Fields神经接触场的方法实现有效的外部接触估计和插入操作。 (from FAIR ) 操作插入处理结果&am…...

编程日记 2023/10/2 18:04:17

一维数组和二维数组的使用（char类型）

目录 导读1. 字符数组1.1 字符数组的创建1.2 字符数组的初始化1.3 不同初始化在内存中的不同1.3.1 strlen测试1.3.2 sizeof测试1.3.3 差异原因 1.4 字符数组的使用 2. 数组越界3. 数组作为函数参数博主有话说 导读 我们在前面讲到了 int 类型的数组的创建和使用&#xff1a; 一…...

编程日记 2023/10/2 18:02:14

1.基本概念 进入Java的世界

1.1 Java的工作方式 1.2 Java的程序结构 类存于源文件里面&#xff0c;方法存于类中&#xff0c;语句&#xff08;statement&#xff09;存于方法中 源文件&#xff08;扩展名为.java&#xff09;带有类的定义。类用来表示程序的一个组件&#xff0c;小程序或许只会有一个类…...

编程日记 2023/10/2 18:01:14

程序在线报刊第一期

文章目录 程序在线报刊第一期排序算法&#xff1a;优化数据处理效率的核心技术回顾区块链技术&#xff1a;去中心化引领数字经济新时代展望AI未来&#xff1a;智能化时代的无限可能 程序在线报刊第一期 排序算法&#xff1a;优化数据处理效率的核心技术 近年来&#xff0c;随…...

编程日记 2023/10/2 18:00:13

k8s 拉取镜像报错 no basic auth credentials

文章目录 [toc]基于现有凭据创建 Secret通过命令行创建 Secretpod 使用指定 secret 认证私有镜像仓库 省流提醒&#xff1a; 本次解决的问题是 docker login 可以正常登录&#xff0c;docker pull 也可以正常拉取镜像&#xff0c;只是 k8s 在启动 pod 的时候&#xff0c;没有指…...

编程日记 2023/10/2 17:59:12

Koa处理请求数据

在开发中&#xff0c;后端接收到请求参数后&#xff0c;需要解析参数。请求分为很多种类型&#xff0c;比如常见的get和post。 请求参数 Koa本身可以解析get请求参数&#xff0c;不能解析post请求参数。例如&#xff1a; router.get(/api/get/userInfo, async (context) >…...

编程日记 2023/10/2 17:58:12

关于浮点数的 fld、fadd、fstp 汇编指令介绍

文章目录 FLDFADDFSTP FLD, FADD 和 FSTP 常在一起出现&#xff0c;用于 float 运算。组合实现浮点数的加载、加法运算和保存 FLD FLD 指令用于将 浮点数 从内存加载到浮点寄存器栈&#xff08;FPU Stack&#xff09;中。它的使用方式如下&#xff1a; FLD <源内存地址&g…...

编程日记 2023/10/2 17:56:10

知识图谱小白入门(1):neo4j的安装与CQL的使用

文章目录 序一、安装neo4j1.1 下载neo4j1.2 安装JDK1.3 BUG&#xff1a;dbms failed to start 二、CQL语法2.1 CQL语法创建节点查询节点创建关系查询关系2.2 习题 习题答案 序 知识图谱&#xff0c;是一种实体间的信息与关系知识的网状结构&#xff0c;借用图论中点与边的概念…...

编程日记 2023/10/2 17:55:09

一个用java的get请求

java发送一个get请求&#xff0c;请求参数classyanfa&#xff0c;使用Authorization认证&#xff0c;在Request Header里填充Authorization&#xff1a; Bearer {token}进行请求认证&#xff0c;token为&#xff1a;sadagdagdgdgfagfd ,另外在Header里补充App标识&#xff0c;X…...

编程日记 2023/10/2 17:54:07

作为SiteGPT替代品，HelpLook的优势是什么？

在当今快节奏的数字化世界中&#xff0c;企业不断寻求创新方式来简化运营并增强客户体验。由于聊天机器人能够自动化任务、提供快速响应并提供个性化互动&#xff0c;它们在业务运营中的使用变得非常重要。因此&#xff0c;企业越来越意识到像SiteGPT和HelpLook这样高效的聊天机…...

编程日记 2023/10/2 17:53:06

uni-app：实现页面效果2（canvas绘制，根据页面宽度调整元素位置）

效果 代码 <template><view><!-- 车搭配指示器-双显 --><view class"content_position"><view class"content"><view class"SN"><view class"SN_title">设备1</view><view class…...

编程日记 2023/10/2 17:52:05

【24种设计模式】责任链模式（Chain of Responsibility Pattern）

责任链模式是一种行为设计模式&#xff0c;它允许你将请求沿着处理链进行传递&#xff0c;直到有一个处理者能够处理该请求为止。这种模式将请求的发送者和接收者解耦&#xff0c;使多个对象都有机会处理该请求。 责任链模式的结构 责任链模式由以下几个角色组成&#xff1a;…...

编程日记 2023/10/2 17:49:02

微信小程序一对多个页面间传递数据进行通信，事件触发的实现方法

在有些场景下&#xff0c;使用组件间通信或者组件和页面间通信并不可行。比如我需要只有一个websocket实例&#xff0c;并且需要向多个页面传递我接收到的消息。 下面的方法是一个页面向其它页面&#xff08;触发事件&#xff09;传递数据&#xff0c;其它页面也可以向这个页面…...

编程日记 2023/10/2 17:48:01

软件测试之Python基础学习

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

编程日记 2023/10/2 17:45:59

模块化编程+LCD1602调试工具——“51单片机”

各位CSDN的uu们你们好呀&#xff0c;小雅兰又来啦&#xff0c;刚刚学完静态数码管显示和动态数码管显示&#xff0c;感觉真不错呢&#xff0c;下面&#xff0c;小雅兰就要开始学习模块化编程以及LCD1602调试工具的知识了&#xff0c;让我们进入51单片机的世界吧&#xff01;&am…...

编程日记 2023/10/2 17:44:58

【Linux】UDP的服务端 + 客户端

文章目录 &#x1f4d6; 前言1. TCP和UDP2. 网络字节序2.1 大小端字节序&#xff1a;2.2 转换接口&#xff1a; 3. socket接口3.1 sockaddr结构&#xff1a;3.2 配置sockaddr_in&#xff1a;3.3 inet_addr&#xff1a;3.4 inet_ntoa&#xff1a;3.5 bind绑定&#xff1a; 4. 服…...

编程日记 2023/10/2 17:41:55

德国自动驾驶卡车公司【Fernride】完成1900万美元A轮融资

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;总部位于德国沃尔夫斯堡的自动驾驶卡车公司【Fernride】今日宣布已完成1900万美元A轮融资&#xff0c;本轮融资完成后Fernride的融资金额已经达到了达到5000万美元。 本轮融资由Deep Tech and Cli…...

编程日记 2023/10/2 17:39:54

实现水平垂直居中的十种方式

本文节选自我的博客&#xff1a;实现水平垂直居中的十种方式 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是MilesChen&#xff0c;偏前端的全栈开发者。&#x1f4dd; CSDN主页&#xff1a;爱吃糖的猫&#x1f525;&#x1f4e3; 我的博客&#xff1a;爱吃糖的猫&…...

编程日记 2023/10/2 17:37:52

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/7/1 4:37:59

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2025/6/30 10:44:58

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/6/22 5:07:54

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2025/6/26 1:48:49

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2025/6/23 7:20:31

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2025/6/26 0:37:24

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2025/6/25 0:03:21

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/6/21 15:39:02

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/6/21 16:56:20

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力：训练时既扩散也回归，但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

编程新知 2025/7/2 12:36:00