css, resize 拖拉宽度

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

可直接复制预览查看属性值:
关键样式属性: 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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/79929.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows同时安装两个版本的JDK并随时切换,以JDK6和JDK8为例,并解决相关存在的问题(亲测有效)

Windows同时安装两个版本的JDK并随时切换&#xff0c;以JDK6和JDK8为例&#xff0c;并解决相关存在的问题&#xff08;亲测有效&#xff09; 1.下载不同版本JDK 这里给出JDK6和JDK的百度网盘地址&#xff0c;具体安装过程&#xff0c;傻瓜式安装即可。 链接&#xff1a;http…

第20节 R语言医学分析:某保险医疗事故赔偿因素分析

文章目录 某保险医疗事故赔偿因素分析源码源文件下载某保险医疗事故赔偿因素分析 我们分析数据集“诉讼”的第一个方法是确定样本数量、变量类型、缩放/编码约定(如果有)用于验证数据清理。 接下来,数据集看起来很干净,没有缺失值,并且对于分类变量,将编码约定替换为实际…

第3章 数据和C

本章介绍以下内容&#xff1a; 关键字&#xff1a;int 、short、long、unsigned、char、float、double、_Bool、_Complex、_Imaginary 运算符&#xff1a;sizeof() 函数&#xff1a;scanf() 整数类型和浮点数类型的区别 如何书写整型和浮点型常数&#xff0c;如何声明这些类型的…

设计模式原来是这样

目录 概述: 什么是模式&#xff01;&#xff01; 为什么学习模式&#xff01;&#xff01; 模式和框架的比较&#xff1a; 设计模式研究的历史 关于pattern的历史 Gang of Four(GoF) 关于”Design”Pattern” 重提&#xff1a;指导模式设计的三个概念 1.重用(reuse)…

工具、技巧【个人专用】如何在CSND编辑器内输出带颜色的字体?Markdown编辑器——字体、字号、颜色使用全解

当你穿过了暴风雨,你就不再是原来那个人。 ————村上春树 🎯作者主页: 追光者♂🔥 🌸个人简介: 💖[1] 计算机专业硕士研究生💖 🌿[2] 2023年城市之星领跑者TOP1(哈尔滨)🌿 🌟[3] 2022年度博客之星人工智能领域TOP4dz

HarmonyOS/OpenHarmony-ArkTS基于API9元服务开发快速入门

一、创建项目 二、创建卡片 三、添加资源 四、具体代码 Entry Component struct WidgetNewCard {/** The title.*/readonly TITLE: string harmonyOs;readonly CONTEXT: string 技术构建万物智联;/** The action type.*/readonly ACTION_TYPE: string router;/** The…

Win10下webots2020b闪退

下载安装完之后打开软件就会停留在这个界面几秒钟&#xff0c;什么都点不了&#xff0c;然后就会闪退回桌面 原因: webots安装路径中有中文 解决方案&#xff1a; 安装路径下的中文改为英文

【广州华锐视点】海上石油钻井VR在线实训平台

随着科技的不断发展&#xff0c;VR元宇宙平台已经成为了越来越多领域的培训工具。在海上石油钻井实训中&#xff0c;VR元宇宙平台也能够发挥重要的作用&#xff0c;为学员提供更加真实、直观的培训体验。 首先&#xff0c;VR元宇宙平台可以模拟真实的海上钻井作业环境。通过VR眼…

Mybatis分页查询案例

前言 今天再写项目时刚好碰到Mybatis分页查询展示数据&#xff0c;现将实现过程整理出来以便后续再碰到类似需求回来瞅一眼。 数据准备 1、数据库表&#xff08;user_info&#xff09; 2、前端页面 代码实现 1、User实体类 package com.liming.pojo;import com.fasterxml.ja…

帆软设计器报表加载不出折线图的原因

最近在用帆软设计器做可视化图表。偶有遇到因为数据集的字段类型导致加载不出折线&#xff0c;现记录如下。做报表的同行可以参考。 数据库使用了 Oracle 11g。数据集的 SQL 代码片是之前用在另一个单元格报表里面的。页面上有一个率是直接计算得出&#xff0c;我为了方便、就…

python+requests+json 接口测试思路示例

实际项目中用python脚本实现接口测试的步骤&#xff1a; 1 发送请求&#xff0c;获取响应 》》2 提取响应里的数据&#xff0c;对数据进行必要的处理 》》3 断言响应数据是否与预期一致 以豆瓣接口为例&#xff0c;做一个简单的接口测试吧。使用到的知识涉及requests库&…

Mermaid系列之FlowChart流程图

一.欢迎来到我的酒馆 介绍mermaid下&#xff0c;Flowchat流程图语法。 目录 一.欢迎来到我的酒馆二.什么是mermiad工具三.在vs code中使用mermaid四.基本语法 二.什么是mermiad工具 2.1 mermaid可以让你使用代码来创建图表和可视化效果。mermaid是一款基于javascript语言的图表…

小研究 - MySQL 分区分表的设计及实(一)

随着信息技术的快速发展&#xff0c;数据量越来越大&#xff0c;海量的表查询操作需要消耗大量的时间&#xff0c;成为影响数据库访问性能提高的主要因素。为了提升数据库操作的查询效率和用户体验&#xff0c;在关系型数据库管理系统(MySQL)中通过 range 分区和 Merge 存储&am…

百模大战,谁是赢家?文心3.5稳坐国内第一,综合评分超ChatGPT!

近日&#xff0c;清华大学新闻与传播学院沈阳团队发布《大语言模型综合性能评估报告》&#xff08;下文简称“报告”&#xff09;&#xff0c;报告显示百度文心一言在三大维度20项指标中综合评分国内第一&#xff0c;超越ChatGPT&#xff0c;其中中文语义理解排名第一&#xff…

在收到满意的大厂offer之前,面试也是至关重要的,那么该如何做好IT类的面试呢?

方向一&#xff1a;分享你面试IT公司的小技巧 沉着冷静应对刁难&#xff1a;应试场上&#xff0c;考官往往会针对求职者的薄弱点提出一些带有挑战性的问题。面对这样的考题&#xff0c;你一定要心平气和&#xff0c;较为委婉地加以反驳和申诉&#xff0c;绝不可情绪激动&#x…

通用Mapper的四个常见注解

四个常见注解 1、Table 作用&#xff1a;建立实体类和数据库表之间的对应关系。 默认规则&#xff1a;实体类类名首字母小写作为表名&#xff0c;如 Employee -> employee 表 用法&#xff1a;在 Table 注解的 name 属性中指定目标数据库的表名&#xff1b; 案例&#…

uC-OS2 V2.93 STM32L476 移植:串口打印篇

前言 前几篇已经 通过 STM32CubeMX 搭建了 NUCLEO-L476RG 的 STM32L476RG 的 裸机工程&#xff0c;下载了 uC-OS2 V2.93 的源码&#xff0c;并把 uC-OS2 的源文件加入 Keil MDK5 工程&#xff0c;通过适配 Systick 系统定时器与 PendSV 实现任务调度&#xff0c;初步让 uC-OS2 …

GSS3 - Can you answer these queries III

GSS3 - Can you answer these queries III 题面翻译 n n n 个数&#xff0c; q q q 次操作 操作0 x y把 A x A_x Ax​ 修改为 y y y 操作1 l r询问区间 [ l , r ] [l, r] [l,r] 的最大子段和 感谢 Edgration 提供的翻译 题目描述 You are given a sequence A of N (N <…

laravel语言包问题

1、更新vendor composer require "overtrue/laravel-lang:3.0" 2、修正配置文件 config/app.php 3、 php artisan config:clear 更新缓存 4、设定新的语言包 在这个resources\lang目录下加即可

dubbo之基础知识

Dubbo 官网地址&#xff1a;Apache Dubbo Dubbo 是一款易用、高性能的 WEB 和 RPC 框架&#xff0c;同时为构建企业级微服务提供服务发现、流量治理、可观测、认证鉴权等能力、工具与最佳实践 作用 1.远程方法调用 2.容错和负载均衡 3.提供服务的自动注册与发现 为什么需要…