weixin_41542494
weixin_41542494
2019-06-12 13:40
采纳率: 80%
浏览 1.0k

关于小程序 css 问题 头像叠加

我有搜到类似的东西 但是他给的代码不置中 这让我有点头疼
https://blog.csdn.net/dwb123456123456/article/details/83757485

这个是找来的文 但是我添加的越多他只往左边添加 我想说 动态控制每添加1
first-of-type*40 问题是这样不知道如何写 请大神给点建议

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • jslang
    天际的海浪 2019-06-12 17:14
    已采纳

    用transform:translateX只能改变元素显示的位置,元素还是占据着在页面上原本所占的空间,这自然影响居中。
    应该为图片设置负值的 margin 来实现头像叠加。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
    <style>
    #box {
        background-color: #cfc;
        font-size: 0px;
        text-align: center;
    }
    #box img {
        border-radius: 50%;
        margin: 0px -15px;
    }
    </style>
    
    </head>
    <body>
    <div id="box">
        <img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
        <img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
        <img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
        <img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
        <img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
        <img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
        <img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
        <img src="https://profile.csdnimg.cn/5/6/7/3_jslang"/>
    </div>
    
    </body>
    </html>
    
    点赞 评论
  • weixin_43365995
    星河· 2019-06-12 14:31

    “动态控制每添加1 first-of-type*40 问题是这样不知道如何写” 这句话什么一什么意思?
    是每次添加的图片都加到数组的第一个吗?还有人家实例很完善了剩下的自己改下就行了

    如果显赫他的效果一样就动态的往images数组的第一个下标为0的位置添加图片就行了

    点赞 评论

相关推荐