CSS div span位置文本重叠

Question

当文本溢出时，我遇到了定位多个相对div的问题：

理想情况下应该如下：

在div上有正确的' - '垂直全中心，并且文本有足够的空间可以打破而不会重叠，所有这些都不会使用任何固定大小。

我设法在jsfiddle上解决问题：http://jsfiddle.net/RASMiranda/xadfxnpn/20/

关键类似乎是：

#application-subscribe-tab > div {
    position: relative;
    height: 16px;
}
#application-subscribe-tab > div > .application-subscribe {
    position: absolute;
    left: 0px;
}
#application-subscribe-tab > div > .remove-subscribe {
    position: absolute;
    right: 0px;
    cursor: pointer;
}

提前致谢！

Answer 1

这应解决问题：

#application-subscribe-tab > div {
    position: relative;
    ** min-height ** : 16px;
}
#application-subscribe-tab > div > .application-subscribe {
    position: ** relative ** ;
    left: 0px;
}

---

http://jsfiddle.net/xadfxnpn/23/

Answer 2

#application-subscribe-tab > div {
position: relative;
height: 16px;
padding: 7px 0px;
}

body {
    color: #4C4C4C;
    font: 12px/1.4 Arial,Helvetica,Verdana,sans-serif;
}

.col {
    margin-left: 4%;
}
.col {
    box-sizing: content-box;
    width: 291px;
}
.col {
    float: left;
}

.bloc {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin: 0px 0px 14px;
    box-shadow: 0px 2px 5px 1px #BFBFBF;
    border-radius: 3px 0px 0px;
    background-color: #FFF;
}

h2 {
    margin: 0px !important;
}
div.action {
    padding: 5px 14px 7px;
    position: relative;
    z-index: 2;
}
.action {
    min-height: 320px;
    height: 320px;
    max-height: 320px;
    padding-left: 3px;
    padding-right: 5px;
}

#application-subscribe-tab {
    overflow-y: scroll;
    max-height: 325px;
    padding-right: 10px;
}

#application-subscribe-tab > div {
    position: relative;
    height: 16px;
    padding: 7px 0px;
}
#application-subscribe-tab > div > .application-subscribe {
    position: absolute;
    left: 0px;
}
#application-subscribe-tab > div > .remove-subscribe {
    position: absolute;
    right: 0px;
    cursor: pointer;
}

<div class="col">
    <div id="list-aplication-validated" class="bloc light-green-white">
        <h2>Mes notifications mail validées</h2>
        <div class="action"> 
            <div id="application-subscribe-tab">
               <div>
                   <span class="application-subscribe">OCTOPUS</span>
                   <span class="remove-subscribe" app-tid="262" csa-tid="195">-</span>
                </div>
               <div>
                   <span class="application-subscribe">ARHISTO - ARCHIVAGE HISTORIQUE COMMERCE</span>
                   <span class="remove-subscribe" app-tid="388" csa-tid="195">-</span>
                </div>
               <div>
                   <span class="application-subscribe">GEPETO</span>
                   <span class="remove-subscribe" app-tid="389" csa-tid="195">-</span>
                </div>
                <div>
                    <span class="application-subscribe">OPOC</span>
                    <span class="remove-subscribe" app-tid="390" csa-tid="195">-</span>
                </div>
            </div>
        </div>
     </div>
</div>