Q
重叠的相同元素
2
A
回答
3
您可以简单地定义一组元素,它具有指定的大小,display: inline-block
要显示在一行中并且负右边距要重叠。
以下是一个简单的HTML/CSS示例来解决您的问题。当然,您必须将其移植到您的React Native应用程序中。
.a {
display: inline-block;
height: 50px;
width: 50px;
margin-right: -20px;
background: gray;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 8px 15px #999;
}
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
0
最简单的(不是最好的方法)会是这样的。 如果你使用预处理器,你可以写这个DRYer。
ul {
padding: 20px 0;
list-style: none;
clear: both;
}
.item {
float: left;
position: relative;
}
.item img {
border-radius: 50%;
overflow: hidden;
position: relative;
}
.item:nth-child(1) img {
background: #aaa;
border-radius: 50%;
}
.item:nth-child(2) img {
background: #bbb;
left: -20px;
}
.item:nth-child(3) img {
background: #ccc;
left: -40px;
}
.item:nth-child(4) img {
background: #ddd;
left: -60px;
}
<ul>
<li class="item"><img src="" width="50" height="50"></li>
<li class="item"><img src="" width="50" height="50"></li>
<li class="item"><img src="" width="50" height="50"></li>
<li class="item"><img src="" width="50" height="50"></li>
</ul>
0
您可以使用相同样式的所有元素,因为当我们与柔性方向列:“行”,第一个元素会被放置在一排开始。
请勿使用负边距!它可能不适用于IOS。
接下来,您应该记住,在反应本机中,每个下一个元素都将在前一个元素之上。所以你唯一应该做的就是在小块内部进行图像定位。
+0
为什么你降低我的答案?你看到标签'反应原生'和'反应原生样式表'吗?这不是关于网络。这完全是关于移动开发。使用html代码片段的答案不正确! –
相关问题
- 1. 同位素元素重叠
- 2. 同位折叠(元素重叠)
- 3. 在relativeLayout中相互重叠的元素
- 4. div元素互相重叠-css
- 5. 旋转元素互相重叠
- 6. 相关元素与Chrome中的绝对元素重叠
- 7. HTML元素重叠
- 8. 重叠CSS元素
- 9. HTML元素重叠
- 10. 重叠HTML元素
- 11. Div重叠元素
- 12. 如何完美重叠两个(相同)元素?
- 13. 重叠元素中的目标元素
- 14. HTML&jQuery - 需要重叠重叠元素
- 15. svg元素层/重叠/叠加/叠加
- 16. 重叠的元素设计
- 17. 带重叠元素的XSLT?
- 18. 重叠的XAML元素
- 19. 的ListView重叠元素
- 20. 重叠的HTML元素
- 21. 重叠的盒子元素
- 22. Flexpaper重叠的HTML元素
- 23. 相对定位的div重叠 - 共享相同的像素行
- 24. 画布重叠元素
- 25. CSS菜单重叠元素
- 26. HTML 5元素重叠
- 27. 重叠元素 - HTML,CSS
- 28. 覆盖/重叠元素
- 29. 块级元素重叠
- 30. 重叠元素错误
React-native(请参阅问题标签)不支持标准的web html和css。 –
@AlexBelets OP没有提供代码,所以我决定给出一个简单的例子,说明基本样式(OP明确要求的样式)的样子。当答案被接受时,我认为,这就是所需要的。 但无论如何您的意见,相应地更新我的答案。 – andreas