2

我有一个 div，里面有两个浮动元素。我希望元素之间有一条 1px 边框。其中一个 div 的内容在高度上是恒定的，而另一个在高度上是可变的。也就是说，第一个 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>
4

2 回答 2

0

这不会给该行您所询问的高度，但我相信它确实为您提供了您正在寻找的最终结果。

添加：

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

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

次要注意：您在这里缺少分号：word-wrap: break-wordin.tablecol1

小提琴

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;
}
于 2013-08-19T14:45:01.413 回答
0

这将解决您的问题：

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

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

这是示例：http:
//jsfiddle.net/vRAPd/

于 2013-08-19T14:39:25.333 回答