根据元素设计,我需要显示一系列元素,每个元素都部分位于下一个元素之上。
使用负边距我可以做到这一点:
唯一的问题是:每个新元素都高于前一个元素,而我想实现相反的结果。
如何?
注意:元素数量未知(它们来自 API)。元素的顺序很重要。
.container {
display: flex;
}
.item {
width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid black;
background: yellow;
margin-right: -8px;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
最佳答案
如果你可以颠倒元素的顺序,你可以这样做:
flexbox
.container {
display: flex;
flex-direction: row-reverse;
}
.item {
width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid black;
background: yellow;
margin-right: -8px;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
如果你不需要 flexbox 你可以这样做:
表格
.container {
display: table;
}
.item {
float: right;
width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid black;
background: yellow;
margin-right: -8px;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
关于css - 在一系列每个都有负边距的元素中,如何使每个元素出现在前一个元素的下方?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55168767/