css - 子div不占父div的高度

Question

我有一个 div，里面有两个 float 元素。我希望元素之间有一条线，一个 1px 的边框。其中一个 div 的内容高度不变，另一个高度可变。即第一个有一行(数字 10、20、30 等)，第二个 div 可能有一、二、三等行(跨行的文本。

我已经玩这个很久了，但无法让它工作。

.tablecol1{
    display:inline;
    width:17%;
    float:left;*/
    max-width: 40px;
    font-size:14pt;
    word-wrap: break-word
    background-color:#ffffff;
    padding-left:1%;
    }
.tablecol2{
    display:inline;

    width:80%;
    float:left;
    font-size:11pt;
    word-wrap: break-word;
    border-left:1px solid #000000;
            padding-left:1%;
    }   
.rowHolder{
    overflow:hidden;
/*  width:100%;*/
    border-top:solid 1px #000000;
    font-size:11pt;
    word-wrap: break-word;
    background-color:#fccfff;
    position:relative;
}
.cleaner {
    clear:both;
    height:1px;
    font-size:1px;
    border:none;
    margin:0; padding:0;
    background:transparent;
}

div 是

<div class="rowHolder">
    <div class="tablecol1">
        <span class="bigtime">09</span> <span class="smalltime">00</span>
    </div>
    <div class="tablecol2"></div>
    <div class="cleaner"></div>
</div>
<div class="rowHolder">
    <div class="tablecol1">
        <span class="bigtime">10</span> <span class="smalltime">00</span>
    </div>
    <div class="tablecol2">
        <div class="appointment" style="background-color:#fab88e">
            10:03 | Sight test | Alan Orr | BB could be the code or comment added
        </div>
        <div class="appointment" style="background-color:#fab88e">
            10:30 | Walk in | John Smith | NP or something about reported sore red eye
        </div>
    </div>
    <div class="cleaner"></div>
</div>

Answer 1

这将解决您的问题:

.tablecol2{
    min-height: 21px;
    ...

由于.tablecol2是float: left，所以不能继承父div的高度。
此代码将设置最小高度，因此将始终呈现分隔线。

例子如下:
http://jsfiddle.net/vRAPd/