网站如何设置微信支付功能,wordpress 忘记密码,漯河小学网站建设,做资讯网站需要哪些资质场景我们经常会遇到这种场景#xff0c;有一个待选图片列表#xff0c;在图片上(可能是右上角也有可能时右下角)叠放一个勾选状态图标#xff0c;这篇文章就记录实现这个功能的过程。原理利用flex布局space-around显示图片列表在图片的外层加一个div#xff0c;同时把勾选状…场景我们经常会遇到这种场景有一个待选图片列表在图片上(可能是右上角也有可能时右下角)叠放一个勾选状态图标这篇文章就记录实现这个功能的过程。原理利用flex布局space-around显示图片列表在图片的外层加一个div同时把勾选状态图标加进去现在的问题就是如何把勾选状态图标移到图片上(这部分可对照最后的代码看)给图标添加一个margin-right把图标挤过去这要求pic-block的宽度固定如果要到达响应式页面的效果这个方法是肯定不行的。将图标设置为positionrelative相对定位然后再添加right:10%让图标往左移动这样虽然能达到一定的适应性而且pic-block的宽度不需要固定但是图标并未脱离文档流所以在页面中还是会占用空间而当有的图片有勾选图标时有的没有图标时布局就会不那么好看所以这个方法使用场景也十分有限。image.png将图标设置为position:absolute绝对定位再添加right:10%让图标往左移动将pic-block设置为position:relative相对定位这种方法能达到完全的自适应。图标的绝对定位让图标脱离文档流使其不占用页面空间flex布局的图片列表就能一直按照图片的空间(pic-block不设置width其width由图片的width决定)进行弹性布局相对布局的pic-block能让绝对定位的图标以它作为父节点(绝对定位以最近的非static布局的元素作为父节点)。这两点使图标一直保持在图片的靠右边10%的位置。(推荐)最终效果最终代码Document .pic-list {display: flex;height: 15.3vh;margin-bottom: 1.7vh;align-items: center;justify-content: space-around;}.pic-list .pic-block-img {height: 100%;}.pic-list .checked-small {height: 20%;position: absolute;bottom: 2%;right: 10%;}.pic-block {position: relative;height: 100%;margin: 0 auto;}.hidden {display: none;}let checkedPictures new Set();function checkPicture(id) {if(checkedPictures.has(id)) {checkedPictures.delete(id);document.getElementById(id-checked).setAttribute(class, hidden);}else {checkedPictures.add(id);document.getElementById(id-checked).setAttribute(class, checked-small);}}
