Question

我有一个div，里面有两个浮动元素。我希望元素在它们之间有一条1px边框。其中一个div的内容高度不变，另一个高度不变。这是第一行有一行（数字10,20,30等），第二行可能有一行，两行，三行等（行的文本。

我多年来一直在玩这个问题而无法让它发挥作用。

.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;
}

divs

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

Answer 2

这不会给你的行提供你所询问的高度，但我相信它确实能为你提供你想要的最终结果。

中加入：

margin-right: -1px;
border-right: 1px solid black;

到第一列允许它share与第二列的边界。因此，当第一列以小屏幕尺寸包裹时，就像现在在您的示例中一样，共享边框将延伸行的整个高度，没有可见的间隙。

次要记录：您在这里错过了一个分号：word-wrap: break-word中的.tablecol1

Fiddle

<强> CSS

.tablecol1 {
    display: inline;
    width: 17%;
    float: left;
    font-size: 14pt;
    word-wrap: break-word;
    background-color: #fff;
    padding-left: 1%;
    margin-right: -1px;
    border-right: 1px solid black;
}
.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;
    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高度

2 个答案: