css - 将多个 css 矩形添加在一起

Question

所以我的 css 文件中有 3 个矩形

#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%;
}

我是这样称呼他们的

    <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/