重疊的相同元素

Question

我想實現：

我被困在試圖解決這個問題。我應該根據列表中的位置定義不同的樣式，還是可以通過對所有項目使用相同的樣式來解決這個問題，如果可以，我該如何去解決？

Answer 1

您可以簡單地定義一組元素，它具有指定的大小，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>

Answer 2

最簡單的（不是最好的方法）會是這樣的。 如果你使用預處理器，你可以寫這個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>

Answer 3

您可以使用相同樣式的所有元素，因爲當我們與柔性方向列：「行」，第一個元素會被放置在一排開始。

請勿使用負邊距！它可能不適用於IOS。

接下來，您應該記住，在反應本機中，每個下一個元素都將在前一個元素之上。所以你唯一應該做的就是在小塊內部進行圖像定位。