div

拖动div元素

萝らか妹 提交于 2019-11-29 18:47:25
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CodePen - draggable div#4</title> <style> *{margin:0;padding:0;border:none} body,html{height:100%;width:100%} .drag-box{user-select:none;background:#f0f0f0;z-index:2147483647;position:fixed;left:0;top:0;width:200px} #dragBoxBar{align-items:center;display:flex;justify-content:space-between;background:#ccc;width:100%;height:40px;cursor:move;user-select:none} .no-select{user-select:none} .pointer-events{pointer-events:none} .no-border{border:none} #injectedBox{height:160px;display:flex;align-items:center;justify-content:center

div拖拽的问题

五迷三道 提交于 2019-11-29 18:21:09
今天看到一篇写的很好的文章,摘抄如下: 思路 父盒子相对定位,子元素,也就是被拖拽的元素绝对定位 当鼠标在子元素中按下时,绑定鼠标移动事件,根据鼠标位置改变元素位置 设置鼠标当前位置(offsetX,offsetY,这时和父的相对位置)为元素的中心位置 移动时改变位置css中的left为offsetX...的位置 当鼠标离开时,解绑鼠标移动事件 实现过程(一) css 部分 .decision-box{ position: relative; width: 1500px; height: 600px; border: 1px solid #000; border-radius: 6px; /*margin-left: -40px;*/ } .item{ position: absolute; width: 50px; height: 30px; background: green; border-radius: 6px; text-align: center; line-height: 30px; cursor: pointer; left: 50px } html 部分 <div class="decision-box decision_box"> <div class="item">1</div> <div class="item">2</div> <div class=

Codeforces Round #582 (Div. 3) F. Unstable String Sort

不打扰是莪最后的温柔 提交于 2019-11-29 14:12:42
传送门 题意: 你需要输出一个长度为n的字符序列(由小写字母组成),且这个字符串中至少包含k个不同的字符。另外题目还有要求:给你两个长度为p和q的序列,设字符序列存在s中 那么就会有s[Pi]<=s[P(i+1)] (i<p)      s[Qi]<=s[Q(i+1)] (i<q) 如果你能找出来满足这些条件的字符串s,就输出YES和s,否则输出NO 这会得到一个非递减字符串 题解: 因为最后的结果是一个非递减字符串,那么肯定对整个字符串s,会有s[i]<=s[i+1] (0<=i<strlen(s)-1) 那么这样的话,只有当Pi>P(i+1)或者Qi>Q(i+1)的时候,才会影响字符串在[P(i+1),Pi]或者[Q(i+1),Qi]的取值,这一段区间内的字符肯定要相等 因为题目上要求字符串s至少要有k个不同的字符,所以只要不遇到上面这种情况,那么每一个位置的字符都要比上一个字符大(我们这里是先用a,再用b等等) 所以我们只需要注意Pi>P(i+1)或者Qi>Q(i+1)这种区间就可以了 想到这里正解就出来了,对每个P[i]找到最小的jjj,使得P[j]的位置在Q中位于P[i]的后方(为了方便,认为i自身也是一个合法的jjj),那么P[j..i]就必须同字母。如果两个同字母段相交,那么合并起来的整一段都必须同字母,因此处理完所有字母段再扫一遍,把相交的同字母段合并

CSS让未知高度div的内容垂直居中(table-cell 和 负margin)

笑着哭i 提交于 2019-11-29 13:09:49
方案一 : <div id="outer"> <div id="middle"> <img id="inner" src=" https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1506010802,1895324471&fm=58&bpow=671&bpoh=409 "/> </div> </div> #outer{ width:500px; height:200px; margin: 50px auto; border:1px solid #CCC; display:table; text-align:center; position:relative; } #middle{ display:table-cell; vertical-align:middle; position:absolute; top:50%; left:50%; } #inner{ position:relative; top:-50%; left:-50%; } 原理:标 准浏览器下用table和table-cell布局,然后用vertical-align:middle居中元素,IE67不支持table布局 方案二: <div id="outer2"> <img id="inner2" src=" https://ss2.baidu.com

div中的图片居中

和自甴很熟 提交于 2019-11-29 13:09:40
问题摘要: 如何让一个div中的图片居中? 先看jsp代码: <div class="png_div"> <img alt="" src="vc4/img/logotitle.png"> </div> 现在给图片所在的div添加样式 .png_class{ width:200px; height:40px; display: table-cell; vertical-align: middle; text-align: center; } 注意: 1.png_class的width不能小于图片的尺寸。 2.因为有display属性,所以png_class的width不支持百分比形式。 3.如果是让div中的小div居中显示的话,也是通过这几个属性来实现的。 实现效果: . 来源: CSDN 作者: 叫我吕小布 链接: https://blog.csdn.net/qq_36769100/article/details/79297792

div中的table等居中

这一生的挚爱 提交于 2019-11-29 13:04:11
有时候在Div中加上 <div style="text-align:center"></div>里面的Table是不会居中的我们可以在Table中加上 margin:auto比如: <div style="text-align:center"> <table border="1" cellpadding="3" cellspacing="0" style="width: 60%;margin:auto"> <tr><td></td> </tr> <tr> </table></div> 来源: CSDN 作者: y666666y 链接: https://blog.csdn.net/y666666y/article/details/84810611

如何让Div中的Table居中

偶尔善良 提交于 2019-11-29 13:03:43
屡试不爽 我的笔记 有时候在Div中加上 <div style="text-align:center"></div>里面的Table是不会居中的我们可以在Table中加上 margin:auto比如: <div style="text-align:center"> <table border="1" cellpadding="3" cellspacing="0" style="width: 60%;margin:auto"> <tr><td></td> </tr> <tr> </table></div> 我的笔记 来源: CSDN 作者: 我笔记 链接: https://blog.csdn.net/y1535623813/article/details/76640327

div中的table自动居中

落花浮王杯 提交于 2019-11-29 13:01:47
div中的table自动居中 直接上代码 < table style = "margin: 0 auto" > < thead > < th > 商品编号 < / th > < th > 图书名称 < / th > < th > 图书类别 < / th > < th > 购买日期 < / th > < th > 操作 < / th > < / thead > < tbody > < / tbody > < / table > 这样table会居中显示 来源: CSDN 作者: 冯insist 链接: https://blog.csdn.net/qq_40036754/article/details/83964469

如何让div中的table居中

≡放荡痞女 提交于 2019-11-29 13:01:34
有时候在Div中加上 <div style="text-align:center"></div>里面的Table是不会居中的我们可以在Table中加上 margin:auto,比如: <div style="text-align:center"> <table style="margin:auto"> </table> </div> 来源: CSDN 作者: return false 链接: https://blog.csdn.net/qq_23934571/article/details/78903690

可编辑DIV光标定位

|▌冷眼眸甩不掉的悲伤 提交于 2019-11-29 11:31:51
可编辑DIV光标定位 为何需要光标定位 当一个DIV标签添加contenteditable=“true” 的属性值的时候,就会将该标签变成一个可编辑的输入框,如果仅是输入文字,完全可以满足需求,但是当我们要插入一张图片的时候(如表情),那么这时候我们将无法知道我们将表情图片插入到哪个位置中,这时候就需要记录DIV中的光标的位置,方便下次插入。 下面介绍的主要是微信网页中出现的问题:div可编辑框每次获取焦点的时候都会触发手机键盘的弹出,但是一般的网页中无法隐藏手机键盘弹出,js的操作是做不到的。 如果我们使用的是<input type="text" readonly/> 其中readonly属性可以不弹出键盘(常用的weui框架中常用这个属性来阻止键盘弹出)但无法显示表情并非我们所需,可是DIV没有这个属性所以我们就需要通过光标定位来保存光标的位置,同时还需要将焦点状态失去才满足需求。 手机网页可编辑DIV光标定位流程 简单说下流程: 获取焦点---》保存光标位置----》失去焦点----》添加内容(光标位置确定) 代码说明 本代码主要是总结项目中用到代码 //判断光标 if (!window._range) { $(divElement).focus();//获取焦点 saveRange();//保存光标位置 $(divElement).blur();//失去焦点 }