CSS：基于兄弟的动态位置/边距

Question

我正在尝试使用 css 制作类似效果的堆叠卡片。我想要基于其前一张卡的位置卡。有没有办法可以在 CSS 中编写某种方程式。我可以使用 jquery 来实现这一点，但我想知道我是否可以在 css 中做到这一点。在这种情况下，没有卡片是动态的。

.card{ position:relative;left10px;} // this didnt work

    /*html*/
   <div id="uno-game">
        <div id="pot">
        </div>   
        <div id="my-cards">
            <ul>
                <li class="green card"><div class="card-inner">3</div></li>
                <li class="red card"><div class="card-inner">3</div></li>
                <li class="green card"><div class="card-inner">3</div></li>
                <li class="blue card"><div class="card-inner">3</div></li>
                <li class="yellow card"><div class="card-inner">3</div></li>
            </ul>
        </div>
    </div>
    /*css*/
    #uno-game{
        height: 500px;
        width: 800px;
        background: green;
        border: 5px solid #000000;
        border-radius: 10px;
        margin: 100px;
    }
    #pot{
        height: 100px;
        width: 100px;
        background: darkgreen;
        margin: auto;
        border: 3px solid darkolivegreen;
        border-radius: 5px;
        margin-top: 200px;
    }
    #my-cards{
        position: relative;
        bottom: 5px;
        margin: auto;
    }
    .card{
        display: block;
        height: 100px;
        width: 75px;
        color: brown;
        border: 1px solid #000;
        border-radius: 5px;
        position: relative;
        left: 10px;
        bottom: 10px;
        float: left;
        padding: 5px;
      -moz-transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
    }
    .card:hover{
        z-index: 1;
    }
    .card-inner{
        height: 49%;
        width: 54%;
        background: wheat;
        border-radius: 40px;
        margin-top: 25px;
        margin-left: 5px;
        padding-left: 23px;
        padding-top: 6px;
        font-size: 35px;
        font-weight: bold;
    }
    .green{
        background: rgb(101, 156, 16);
    }
    .red{
        background: orangered;
    }
    .blue{
        background: skyblue;
    }
    .yellow{
        background: yellow;
    }

Answer 1

试试这个 CSS

.card + .card {
    margin-left:-70px;
}

Answer 2

您可以将卡片向左浮动。

.card{
    float: left;
    margin-right: -5px; //you can change it according to your needs
}