

标题可能看的有点晕,其实就是说一个div距离页面左侧的位置可能会变动,那如何让fixed定位的元素和它保持固定的距离呢?
看如下代码:
<div class="box"> <div class="box1"></div> <div class="box2">从这里开始是box2的内容部分,左边是内边距</div> </div> <style> body{margin: 0;} .box{width: 810px;margin: 0 auto;} .box1{ width:600px; height:2000px; background-color:#3F0;} .box2{ width:400px; height:200px; background-color:#930; position:fixed;top: 0;right: 0;bottom: 0;left: 0;margin: auto;padding-left: 810px;color: #fff;} </style>
最外层box宽810px,始终水平居中。然后box1宽600px,在外层box里面居左。box2是固定定位position:fixed,想让box2在外层box里面居右,而且和box1有10px的间距。
这时候问题来了,box2是固定定位,而不是相对定位或绝对定位。固定定位是始终相对于窗口定位的,而不是相对于父元素。如果给box2一个固定的left值,窗口宽度一旦改变,外层box距页面的水平位置改变了,box2却保持不变,这就和box1错位了。
然后我去百度,看到有篇文章说的是把固定定位的元素设置居中。我隐约觉得破解这个问题的契机出现了,试了一会儿,终于找到了方法,那就是不使用left定位,而是使用padding或border去挤。
先把fixed定位的元素居中,然后用padding-left或border-left去挤(推荐用用padding-left),其宽度等于外层box的宽度(不能用margin-left,因为它要用来设置居中)。这样,当页面宽度改变时,box2相对于外层box的位置是不变的,也就不会和box1错位了。
但是这样也有缺陷:
第一,fixed的元素因为加了padding或border,实际宽度增加了。如果窗口宽度小于这个宽度,平衡就会被打破。
第二,padding和border都是可见元素,所以fixed定位的元素不要设置背景色和边框,否则在视觉上会影响页面。要设置的话在元素内建立子元素来做。
现在想想有点意思,和《绝对定位的元素居中》的方法有相似之处。只不过固定定位的是把元素居中,而绝对定位是把元素左侧居中。然后都是去挤了。
css实现position:fixed元素和另一个元素保持固定的距离
国庆长假过了5天,其中除了在食堂吃饭之外,时间都是在宿舍度过的。嘛。。玩着玩着就这样过了。
每到黄金周长短假的时候,空间总会有一大波吃喝玩乐游自拍,无论是好机油之间耍帅,还是情侣公然秀恩爱,应有尽有。
说到底,无论是出行游玩还是宅室内“游玩”,终究是为了让自己开心。只不过各自有各自的方式。互不打扰,彼此安好,就足够了。
当然自己也有过出行的想法,趁着年轻有时间有精力多去玩一下没什么不好。或许经历造就了自己现在的性格,不是特别得向往旅游,不是特别积极参加集体活动了。高考之后的漫长假期当中,因为家里管得严所以没去旅游,到了大学之后,孤身一人错过许多集体社团活动,所以也没有去哪里游玩的机会。甚至在同学之间,应该也会有人认为我是死宅了吧。
那又如何呢?
了解我的人,不言而喻。
不懂我的人,多说无益。
此时此刻,无论是在独处,还是在相约,开心度过每一分每一秒才是最重要的事情吧,何必悲伤逆流成河自挂东南枝?
喜欢出行的人,向往追求的美好。
甘于独处的人,必有支撑的信念。
都没有错!
现在回忆起来,初中三年的寒暑假期,自己都是窝在房间里面玩电脑。游戏都是三国群英传2、3,都是GBA模拟器里的游戏王,黄金太阳,超级机器人大战,千千静听的播放列表列表里面全部都是初音的歌曲。或许你认为我是沉迷游戏,但是我还很清醒,我不孤单不遗憾不后悔,自得其乐。
所以,用自己喜欢的方式度过美好的时光吧!不留下一丝遗憾!
愿,玩得开心,一切安好。
—— 2015年10月6日 03:21:03
国庆五天的心得总结
今天看到了一张不错的图,照例谷歌搜图找出来了原图,出处是《(C86) [40010壱号 (40010試作型)] Hitasura Summer (ToLOVEる-とらぶる-)》。
磁力链接:
magnet:?xt=urn:btih:C1AD1FF8C91ECFE86CF1C8264AAB2ABAD2C14C0A
ToLove本子 Hitasura Summer (ToLOVEる-とらぶる-)
昨天去收傲娇千夜的初音图,看到了他最新的一张作品,当我读到描述的时候我已经跪了。这个比装的,我给10分。
大触的装逼日常
前言: 和好(壕)伙伴的约定,高考之后送我一个抱枕~今天兑现了呢。
其实是因为自己拖沓,怕花钱也没有主动去淘宝找,毕竟是朋友送给我的嘛,总不能太坑人辣!!
进驻saber酱的空间已经好几个月了,第一次投稿有些小鸡冻呢。
我老婆的抱枕⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄
谨以此图表达我对国庆只过三天并且两天调休并且最后也没能休并且宿舍一直断网的深切的感受。
命运石之门资源提取工具(补档在2L
CG里并没有包含游戏里的全部图片,有些图片应该是属于背景图这组资源里的。
前几天把《命运石之门》通关了,游戏超赞。好想再玩玩别的路线,可是最近又开始玩别的游戏了。
Read More →
命运石之门通关记录
虽然本站看起来和以前一模一样,不过已经换了空间重新装了一次哦~在这里总结下经验吧~
首先要备份的是数据库,建议从phpmyadmin里直接备份,导出sql格式。但这样的话一定要询问下客服,导入时限制的文件上限是多大。因为默认情况下mysql只支持2M以下的sql文件的导入。
其次去备份WordPress的文件,需要备份的是wp-content里面的plugins、themes、uploads文件夹。此外如果你修改了WordPress的文件,也备份出来。
最后检查其他需要备份的文件,例如.htaccess、favicon.ico、robot.txt、网站地图等文件。
恢复的时候先装上WordPress,然后把网站的文件传上来。最后去数据库里,清空WordPress的所有数据表,再导入之前的数据库备份。
当然域名解析和空间绑定也要改,这个就不多说了。
备份和恢复WordPress的记录
上面的这张图片是一个ico图标。在chrome中可以显示为它的最大尺寸256*256,在Firefox中会显示为最小尺寸16*16,在IE中无法显示←_←
昨天搜人物素材,无意间看到了这张图。当时一愣,美女你谁啊?你不是沙耶加吗,什么时候去客串saber了?
去年看了小圆的TV动画,剧场版却是前几天才去看的。看完没两天就见到了沙耶加的图,不得不说这是命运石之门的选择啊。
说到命运石之门,正好最近在玩石头门的游戏。这巧合……难道说,这是未来的我改变了过去,故意要让我看到这张图的吗?那么“他”是要提醒我做些什么呢?是不是要让我感到遇到了极大的巧合,然后去买一张彩票呢?噫……姑且去买一个看看
于是我就打开了手机淘宝,结果找不到彩票选项。百度了一下,噫————
马萨卡,这一切都是“机关”的阴谋吗?我顿时不寒而栗——
回到正题,五色战队怎么会只有一张图呢,剩下的四个请继续往下看。
Read More →
FZ和小圆结合的人物图标
米娜桑,中秋快乐~
其实我这个人对过节没什么感觉的,不过好歹还是发篇文章纪念下吧。
到北京一周了,现在真可谓独在异乡为异客了。工作好忙,也没出去转转(虽然我怀疑就算有空我也不会出去转)。白天上班忙的连发篇文章的时间都没有,晚上回了宿舍还没网——等到十月一才能有网。文章断更的时候我很不爽啊(虽然发出来也没几个人看←_←
Read More →
诸君中秋快乐
本站以前有篇文章——《saber美图》。以前我看到了saber的美图就会发上来,频繁的更新。可是自从逛了P站之后这篇文章基本就没更新过了。这也算告一段落了吧,于是我想把这篇文章里的图片下载下来,这就有了下面的代码:
window.stop(); var allimg=$(".post_t img"); var downa=document.createElement("a"); document.body.appendChild(downa); downa.download=""; var imgno=0; function downimg () { downa.href=allimg.eq(imgno).attr("src"); downa.click(); imgno++; if (imgno>=allimg.length) { window.clearInterval(downimgt); }; return imgno; } var downimgt=setInterval("downimg()", 1000);
使用方法:
打开文章页面,在文档加载完成之后(不必等待图片加载完成),在控制台执行上面的代码。
执行之后,将会停止页面加载,然后创建一个下载用的链接(所以此代码照例是chrome only)。最后,每一秒创建一个下载链接,以下载图片。
如果chrome询问是否允许此网站下载多个文件(应该是在地址栏上显示的提示),点击允许。