CSS：基於兄弟的動態位置/保證金

我正在嘗試使用css效果卡片。我需要根據其上一張牌的位置卡。有什麼辦法可以在CSS中編寫某種方程式。我可以使用jQuery來實現這一點，但我想知道我是否可以在CSS中做到這一點。在這種情況下沒有任何卡會變成動態的。CSS：基於兄弟的動態位置/保證金

these are cards. and they are going to be dynamic

.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; 
    }

來源

2013-02-20 Kiran Ambati

我希望你真的試圖'左：10px'，而不是'left10px' .... – 2013-02-20 17:27:50

試試這個CSS

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

來源

2013-02-20 17:34:59

完美。我不知道css可以這樣寫。 – 2013-02-20 17:38:12

關於CSS選擇器的最佳解釋之一！ http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ – 2013-02-20 17:39:18

您可以浮動卡離開了。

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

來源

2013-02-20 17:27:50

感謝您的編輯！當它不起作用時，會真的讓OP困惑。 – 2013-02-20 17:29:33

哇人。像魅力一樣工作。但是這個餘量應該是負值有莖效應。請將其編輯爲一些負值像素margin-right：-10px; – 2013-02-20 17:33:12

很高興爲您提供幫助。那麼，我不知道你想要什麼效果，這就是爲什麼我留下了不能改變的評論。 – 2013-02-20 17:34:57

CSS：基於兄弟的動態位置/保證金

回答

相關問題