添加多個CSS矩形組合在一起

Question

所以我在我的CSS文件

#background .icicle#ice1 { 
    left: 24%; 
    top: 0%; 
    width: 2%; 
    height: 8%; 
} 

#background .icicle#ice2 { 
    left: 26%; 
    top: 0%; 
    width: 2%; 
    height: 16%; 
} 

#background .icicle#ice3 { 
    left: 28%; 
    top: 0%; 
    width: 2%; 
    height: 4%; 
} 

3個矩形和我打電話給他們，像這樣

<div id="background"> 
     <div class="icicle" id="ice1"></div> 
     <div class="icicle" id="ice2"></div> 
     <div class="icicle" id="ice3"></div> 
    </div> 

我想知道如何添加ice1,2 ，3個在一起，因爲如果我把它們放在一起，最後一個矩形將替換前一個矩形。

#background .icicle#ice1 { 
    left: 24%; 
    top: 0%; 
    width: 2%; 
    height: 8%; 

    left: 26%; 
    top: 0%; 
    width: 2%; 
    height: 16%; 

    /* This one would only be displayed */ 
    left: 28%; 
    top: 0%; 
    width: 2%; 
    height: 4%; 
} 

Answer 1

你可以組這三個小片冰柱成一個像這樣的：使用

<div id="background"> 

    <!-- Each Icicle ---> 
    <div class="icicle" id="ice1"> 
     <!-- Pieces that make up each icicle --> 
     <span></span> 
     <span></span> 
     <span></span> 
    </div> 

</div> 

和位置的每個冰柱的ID的

http://jsfiddle.net/samliew/KJKLV/