我想堆疊像下面的圖片一樣的div元素,而不必手動輸入我添加的每個新div的位置。有沒有什麼辦法可以寫出一個樣式來堆疊我的元素?我想避免使用JavaScript。堆疊div元素
做這樣的事情:因爲它會以相同的量移動所有的人都
div{
left:-30px;
}
將無法正常工作。
我知道我可以做的是有更小的div,差不多相鄰,並讓它們包含更大的差距。這個tho的問題是我希望能夠通過操縱大元素的z-index來改變堆棧順序,如果它們是不同div的子元素,那麼它將無法正常工作。
下面是一個堆棧段:
div {
position: relative;
float: left;
width: 200px;
height: 300px;
}
#div_1 {
background-color: red;
}
#div_2 {
background-color: blue;
}
#div_3 {
background-color: yellow;
}
#div_4 {
background-color: green;
}
<body>
<div id="div_1">div1</div>
<div id="div_2">div2</div>
<div id="div_3">div3</div>
<div id="div_4">div4</div>
</body>
哪裏是你的HTML/CSS? – 2014-10-02 12:40:17
你如何處理顏色?如果您已經手動完成這項工作,那麼添加偏移量可能不會有太多工作。如果你使用像LESS或SASS這樣的預處理器,它會變得更加容易。 – 2014-10-02 12:50:46
我添加了一些代碼。顏色只是爲了這個例子,所以你可以看到我的目標是什麼。這些div實際上都是相同的顏色。嗯neevr聽到更少和sass ..虐待它看看它 – Billakosama 2014-10-02 12:54:10