2

内部に 2 つの浮動要素を持つ div があります。要素の間に 1px の境界線を引く必要があります。div の 1 つのコンテンツの高さは一定で、もう 1 つの高さの変数です。つまり、最初の div には 1 行 (番号 10、20、30 など) があり、2 番目の div には 1、2、3 などの行 (行にまたがるテキスト) があります。

私はこれで何年も遊んできましたが、うまくいきません。

.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

これはあなたの問題を解決するでしょう：

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

そのままで.tablecol2はfloat: left、親divの高さを継承できません。
このコードは最小の高さを設定するため、区切り線は常にレンダリングされます。

例を次に示します:
http://jsfiddle.net/vRAPd/

于 2013-08-19T14:39:25.333 に答える
0

これは、あなたが求めていた高さを行に与えることはありませんが、あなたが探していた最終結果が得られると信じています.

追加:

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

最初の列にするshareと、2 番目の列との境界になります。そのため、例のように最初の列が小さな画面サイズで折り返される場合、共有境界線は行の高さ全体に広がり、目に見えるギャップはありません。

軽微な注意: ここにセミコロンがありませんでした: 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 に答える