weixin_41542494 2019-06-12 13:40 采纳率: 80%
浏览 1400
已采纳

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

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

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

  • 写回答

2条回答 默认 最新

  • 天际的海浪 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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？