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

css， resize 拖拉宽度

news 2026/6/3 12:12:46

效果如下：在这里插入图片描述

可直接复制预览查看属性值:
关键样式属性： resize: horizontal; overflow-x: auto;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./style.css" type="text/css" title="Atom">
</head>
<body><div class="box"><div class="left"><div class="resizeIcon">🎈</div><div class="resize"></div><div class="content"><h2>面朝大海，春暖花开</h2>从明天起，做一个幸福的人 <br>喂马、劈柴，周游世界 <br>从明天起，关心粮食和蔬菜 <br>我有一所房子，面朝大海，春暖花开 <br>从明天起，和每一个亲人通信 <br>告诉他们我的幸福 <br>那幸福的闪电告诉我的 <br>我将告诉每一个人 <br>给每一条河每一座山取一个温暖的名字 <br>陌生人，我也为你祝福 <br>愿你有一个灿烂的前程 <br>愿你有情人终成眷属 <br>愿你在尘世获得幸福 <br>我只愿面朝大海，春暖花开 <br></div></div><div class="right"></div></div>
</body>
</html>

* {padding: 0;margin: 0;box-sizing: border-box;
}
html, body {width: 100%;height: 100%;
}
.box {width: 100%;display: flex;height: 100%;
}
.left {position: relative;margin-right: 16px;height: 100%;border: 1px solid red;
}.left .resize {resize: horizontal;overflow-x: auto;height: calc(50% + 16px);min-width: 400px;opacity: 0;width: calc(100vw - 100px - 16px - 4px);max-width: calc(100vw - 100px - 16px - 4px);transform: translateX(12px);border: 1px solid orange;
}.left .content {position: absolute;left: 0;top: 0;height: 100%;overflow: auto;line-height: 36px;padding: 50px;
}.left .resizeIcon {position: absolute;right: -16px;font-size: 18px;top: 50%;
}.right {border: 1px solid blue;min-width: 100px;height: 100%;flex: 1;
}

相关文章：

css， resize 拖拉宽度

效果如下&#xff1a; 可直接复制预览查看属性值: 关键样式属性&#xff1a; resize: horizontal; overflow-x: auto; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content…...

编程日记 2023/8/8 3:31:46

Python识别抖音Tiktok、巨量引擎滑块验证码识别

由于最近比较忙&#xff0c;所以本周搞了一个相对简单的验证码&#xff0c;就是抖音Tiktok的滑块验证码&#xff0c;这也是接到客户的一个需求。这种验证码通常在电脑端登录抖音、巨量引擎的的时候出现。 首先看一下最终的效果&#xff1a; 验证码识别过程 1、利用爬虫采集图…...

编程日记 2023/8/8 3:30:45

EvilBox One靶场笔记

EvilBox: One靶场笔记 信息收集 先fscan找主机192.168.1.102 namp扫端口 开放80,22端口 然后扫目录 └─$ gobuster dir -r -u http://192.168.1.102/ -w /usr/share/wordlists/dirbuster/directory-list-2.3-medium.txt -x php,txt,bak,html在扫secret目录&#xff0c;找…...

编程日记 2023/8/8 3:29:44

shell脚本中的export无效

写了一段shell脚本&#xff1a; #!/bin/bash source Tools/simulation/gazebo-classic/setup_gazebo.bash $(pwd) $(pwd)/build/px4_sitl_default export ROS_PACKAGE_PATH$ROS_PACKAGE_PATH:$(pwd) export ROS_PACKAGE_PATH$ROS_PACKAGE_PATH:$(pwd)/Tools/simulation/gazebo…...

编程日记 2023/8/8 3:28:42

前沿分享-鱼形机器人

可能并不太前沿了&#xff0c;是21年底的新闻了&#xff0c;但是看见了就顺便发一下吧。 大概就是&#xff0c;通过在pH响应型水凝胶中编码不同的膨胀速率而构建了一种环境适应型变形微机器人,让微型机器人直接向癌细胞输送药物从而减轻药物带来副作用。 技术原理是&#xff0c…...

编程日记 2023/8/8 3:27:41

摄像机终端IP地址白名单配置流程

海康摄像头配置白名单流程 1.登录海康摄像机前端 2.进入配置-系统-安全管理-IP地址过滤 3.IP地址过滤方式选择“允许” 4.点击添加按钮输入对应的IP地址或者IP网段 5.最后勾选启用IP地址过滤&#xff0c;然后保存 大华摄像头配置白名单流程 1.登录大华摄像机前端 2.进入设…...

编程日记 2023/8/8 3:26:40

Glibc—查看版本

方式1&#xff1a;直接查看ldd版本 ldd --versionldd (Buildroot) 2.30 Copyright (C) 2019 Free Software Foundation, Inc. This is free software; see the source for copying conditions. There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICU…...

编程日记 2023/8/8 3:25:34

C++物理引擎Box2D的下载，编译，VS2013配置环境

文章目录 网站和下载地址编译工具：编译box2dhelloworld测试网站和下载地址 https://box2d.org/ 下载地址 https://hub.nuaa.cf/erincatto/box2d/tags 编译工具： 1.VS2013 2.cmake 下载地址 https://cmake.org/ 编译box2d 下载box2d源码2.4.0，解压。在box2d-2.4.0目录下…...

编程日记 2023/8/8 3:24:33

STL容器详解——map容器

一、map容器介绍 作为关联式容器的一种&#xff0c;map 容器存储的都是 pair 对象&#xff0c;也就是用 pair 类模板创建的键值对。其中&#xff0c;各个键值对的键和值可以是任意数据类型&#xff0c;包括 C 基本数据类型&#xff08;int、double 等&#xff09;、使用结构体…...

编程日记 2023/8/8 3:23:32

VR全景在建筑工程行业能起到哪些作用？

在建筑工程领域&#xff0c;数字化技术为行业的发展起到巨大的推动作用&#xff0c;虽然建筑施工行业主要是依赖于工人劳动力和施工设备&#xff0c;但是VR全景在该行业中方方面面都能应用&#xff0c;从设计建模到项目交付&#xff0c;帮助建筑师以及项目方更好的理解每个环节…...

编程日记 2023/8/8 3:22:30

P1257 平面上的最接近点对

题目 思路 详见加强加强版 代码 #include<bits/stdc.h> using namespace std; #define int long long const int maxn4e510; pair<int,int> a[maxn]; int n; double d1e16; pair<int,int> vl[maxn],vr[maxn]; void read() { cin>>n;for(int i1;i<…...

编程日记 2023/8/8 3:21:29

8月1日上课内容 第一章web基础与http协议

dns与域名 网络是基于tcp/ip协议进行通信和连接的 应用层--传输层---网络层----数据链路层-----物理层 ip地址&#xff0c;我们每一台主机都有一个唯一的地址标识(固定的ip地址)&#xff0c;区分用户和计算机通信。 ip地址:32位二进制数组成的&#xff0c;不方便记忆 192.168.…...

编程日记 2023/8/8 3:20:28

Gson 添加数据默认值问题记录

问题&#xff1a;在用Gson add(key&#xff08;string类型&#xff09;&#xff0c;value&#xff08;必须是JsonElement子类&#xff09;&#xff09;时发现&#xff0c;value 传了 "" 空字符串&#xff08;非null&#xff09;&#xff0c;默认解析后返回null&#…...

编程日记 2023/8/8 3:19:27

利用Arthas+APM监控进行Java性能深度定位

大家可能都用过APM监控&#xff0c;包括开源的Skywalking、商用的卓豪&#xff08;ZOHO&#xff09;ManageEngine APM应用性能监控、以及云监控产品如听云&#xff08;Server监控&#xff09;&#xff0c;这些APM监控产品大大方便了我们实时监控应用性能&#xff0c;并实现性能…...

编程日记 2023/8/8 3:18:26

【BASH】回顾与知识点梳理（十一）

【BASH】回顾与知识点梳理 十一 十一. 八至十章知识点总结及练习11.1 总结11.2 练习情境模拟题一&#xff1a;透过 grep 搜寻特殊字符串&#xff0c;并配合数据流重导向来处理大量的文件搜寻问题。情境模拟题二&#xff1a;使用管线命令配合正规表示法建立新指令与新变量。 该系…...

编程日记 2023/8/8 3:17:24

vue2-diff算法

1、diff算法是什么&#xff1f; diff算法是一种通过同层的树节点进行比较的高效算法。 其有两个特点&#xff1a; 比较只会在同层级进行&#xff0c;不会跨层级进行。 在diff比较的过程中&#xff0c;循环从两边向中间比较。 diff算法在很多场景中都有应用&#xff0c;在vue中&…...

编程日记 2023/8/8 3:16:20

SpringBoot使用redis作为缓存的实例

目录 什么是缓存&#xff1f; 缓存的作用&#xff1f; 缓存的成本&#xff1f; 实际项目中的应用 代码展示 什么是缓存&#xff1f; 缓存就是数据交换的缓冲区&#xff08;称作Cache [ kʃ ] &#xff09;&#xff0c;是存贮数据的临时地方&#xff0c;一般读写性能较高。 缓…...

编程日记 2023/8/8 3:15:15

vue3使用vue3-seamless-scroll插件

1、局部引入 import vueSeamlessScroll from "vue-seamless-scroll"; 2、注册 components: { vueSeamlessScroll, }, 3、使用 <vue3-seamless-scroll :list"list1" class"scroll" step"0.2"><div class"item"…...

编程日记 2023/8/8 3:14:13

QT开发学习相关笔记

QT中配置文件读取 QT中使用的config文件为&#xff1a;xxx.ini文件,基本格式如下&#xff1a; 使用 QSetting&#xff08;QT自带类&#xff09;中的相关接口实现设置配置文件数据&#xff0c;或者读取数据。 读取配置文件路径设置如下&#xff0c;其中 iniPath为设置路径 ne…...

编程日记 2023/8/8 3:13:11

拆分PDBQT文件并将其转换为PDB格式

拆分PDBQT文件转为PDB格式 1. vina_split拆分PDBQT文件 假设你用AutoDock Vina做了对接&#xff0c;那么所有预测的结合构象都被放入一个多构象 PDBQT 文件中&#xff0c;如果需要拆分后进行可视化分析&#xff0c;那么Vina官方自带了vina_split来进行拆分。下面是vina_split…...

编程日记 2023/8/8 3:12:08

FCEUX终极指南：从怀旧游戏到专业调试的完整NES模拟器教程

FCEUX终极指南&#xff1a;从怀旧游戏到专业调试的完整NES模拟器教程 【免费下载链接】fceux FCEUX, a NES Emulator 项目地址: https://gitcode.com/gh_mirrors/fc/fceux FCEUX是一款功能强大的开源NES模拟器&#xff0c;让你在现代电脑上完美重温经典红白机游戏。无论…...

编程新知 2026/5/26 4:28:21

百考通智能任务书：贴合你的选题，拒绝空话假大空

毕业设计任务书是高校教学管理中的关键环节&#xff0c;它不仅标志着研究工作的正式启动&#xff0c;更是后续开题、实施、论文撰写和答辩全过程的行动依据。然而&#xff0c;许多学生在撰写时常常因不熟悉本专业写作规范、技术表达能力有限&#xff0c;或缺乏权威模板参考而陷…...

编程新知 2026/5/26 2:59:49

用Python和MNE库玩转BCI Competition IV 2a脑电数据集：从数据加载到可视化全流程

用Python和MNE库玩转BCI Competition IV 2a脑电数据集&#xff1a;从数据加载到可视化全流程当你第一次接触脑电信号处理时&#xff0c;面对原始数据文件可能会感到无从下手。BCI Competition IV 2a数据集作为脑机接口领域的经典基准数据&#xff0c;包含了9名受试者四种运动想…...

编程新知 2026/5/26 2:59:48

从理论推导到代码实现：手把手教你用Python/Numpy写出守恒形式的NS方程求解器

从理论推导到代码实现&#xff1a;手把手教你用Python/Numpy写出守恒形式的NS方程求解器计算流体力学&#xff08;CFD&#xff09;的魅力在于它将抽象的数学方程转化为可执行的代码&#xff0c;让流体运动的奥秘在计算机中重现。对于已经掌握流体力学理论的中高级学习者来说&am…...

编程新知 2026/5/26 2:29:35

为什么92%的DeepSeek二次开发团队在6个月内遭遇交付延迟？——基于17个真实项目的技术债务归因分析

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;为什么92%的DeepSeek二次开发团队在6个月内遭遇交付延迟&#xff1f;——基于17个真实项目的技术债务归因分析 在对17个采用DeepSeek-R1/VL模型开展定制化开发的工业级项目进行回溯审计后&#xff0c;我…...

编程新知 2026/5/26 0:56:48

从CTF题看RSA安全：为什么你的密钥不能‘共享素数’？

从CTF实战看RSA密钥安全&#xff1a;那些年我们踩过的坑 在网络安全竞赛和实际渗透测试中&#xff0c;RSA算法的错误实现方式往往成为突破的关键点。本文将通过典型CTF赛题案例&#xff0c;揭示五种常见RSA实现漏洞背后的数学原理和安全启示&#xff0c;帮助开发者在实际项目中…...

编程新知 2026/5/26 0:20:12

1901-2022年中国气温变化分析实战：用这份1km栅格数据我们能发现什么？

1901-2022年中国气温变化分析实战&#xff1a;如何从1km栅格数据中挖掘气候演变规律当一份覆盖122年、分辨率精确到1公里的气温栅格数据摆在面前时&#xff0c;我们看到的不仅是数字矩阵&#xff0c;更是一部写在经纬度坐标里的气候变迁史诗。这份由逐月数据聚合生成的逐年气温…...

编程新知 2026/5/25 23:45:44

从开题到定稿零焦虑：okbiye AI 论文写作，帮你把毕业季的 “大山” 变成坦途

okbiye-免费查重复率aigc检测/开题报告/毕业论文/智能排版/文献综述/AI PPT毕业论文 - Okbiye智能写作https://www.okbiye.com/ai/bylw 毕业季的深夜&#xff0c;宿舍台灯下的屏幕亮着刺眼的光&#xff0c;文档里的字数停留在三位数&#xff0c;而 deadline 正一天天逼近。你是…...

编程新知 2026/5/25 22:56:45

【与我学 ClaudeCode】协作篇 之 Worktree + Task Isolation ：目录隔离的并行执行通道

作者&#xff1a;逆境不可逃 技术永无止境 希望我的内容可以帮助到你&#xff01;&#xff01;&#xff01;&#xff01; 大家吼 ! 我是 逆境不可逃 今天给大家带来文章《【与我学 ClaudeCode】协作篇 之 Worktree Task Isolation &#xff1a;目录隔离的并行执行通道》. Le…...

编程新知 2026/5/25 22:52:44

AI率总超标？2026年AI写作辅助网站排行榜权威发布，轻松定稿不是梦！

写论文效率低、熬夜赶稿、查重不过关&#xff1f;别慌&#xff01;2026 年最新 AI 论文写作工具合集来了&#xff0c;覆盖选题、大纲、初稿、润色、降重、格式、文献引用全流程&#xff0c;帮你精准匹配最适合的学术助手&#xff0c;彻底告别论文内耗&#xff01;&#x1f3c6;…...

编程新知 2026/5/25 22:26:31