如何爲未知數量的css元素運行css代碼

我想爲從php while循環生成的某些元素運行css代碼，因此無法指定元素的數量。比方說，這是我對每個元素如何爲未知數量的css元素運行css代碼

.element { 
    position: absolute; 
    width:200px; 
    height:200px; 
    z-index:100; 
    margin-left:50px; 
}

CSS但這種安排在同一地點的所有元素。但我需要的元素看起來像下面這個圖像

所以我想每個元素的高度是200 - （20 * childIndex）的餘量左爲50 * childIndex和z-index爲1000 - childIndex。請如何運行我的css代碼？

來源

2017-05-15 user7713452

一個解決方案是在while循環中通過PHP對這些元素進行內聯樣式。這應該夠了吧。如果您可以提供您的代碼，然後我們可以給你更多技巧&通知：

來源

2017-05-15 07:27:56

我不想做內聯的CSS。我知道它可以在正常的CSS中完成 – user7713452

這裏是解決方案：

* { 
 
\t \t \t box-sizing: border-box; 
 
\t \t } 
 
\t \t .container, div{ 
 
\t \t \t width: 200px; 
 
\t \t \t height: 200px; 
 
\t \t \t background-color: yellow; 
 
\t \t \t border: red solid 4px; 
 
\t \t } 
 
\t \t .container { 
 
\t \t \t position: relative; 
 
\t \t \t z-index: 1; 
 
\t \t } 
 
\t \t .container div { 
 
\t \t \t height: calc(100% - 20px); 
 
\t \t \t position: absolute; 
 
\t \t \t margin-left: 20px; 
 
\t \t \t top: 10px; 
 
\t \t }

<div class="container"> 
 
    <div> 
 
    <div> 
 
     <div> 
 
     <div> 
 
      <div> 
 
      <div> 
 

 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

按我的理解，你要嵌套的元素，以便z-index to be 1000 - childIndex不會可能爲z-index將工作爲同一級別的元素沒有嵌套元素

來源

2017-05-15 07:33:47

如何爲未知數量的css元素運行css代碼

回答

相關問題