コンテナの高さをスパンまで伸ばすCSS

Question

私は2つのスパン要素を並べて、スパンの1つに境界線を適用しました。この問題は、あるスパンが他のスパンよりも多くの行を持っている場合に発生します。コンテンツの量が少ないスパンが適用されている境界線である場合、境界線はコンテナの底まで伸びません。

スパンに含まれる高さと高さの要素、含まれているdiv、成功しなかったさまざまな組み合わせのHTMLタグとbodyタグを追加しようとしました。ここで

は、サンプルのHTMLです：

<div class="newspecs"> 
    <div class="ns_row_type_2"> 
     <span class="ns_field_name">Flash Exposure Compensation</span> 
     <span class="ns_field_value">+/- EV<br>more text<br>more text<br>more text<br>more text</span> 
    </div> 
</div> 

、適用CSS：誰もがアイデアを持っている

http://yazminmedia.com/clients/IR/test.htm

：

.newspecs div { 
    display: block; 
    clear: both; 
} 
.newspecs span { 
    display: inline-block; 
    vertical-align: top; 
} 
.ns_row_type_1, 
.ns_row_type_2 { 
    border-bottom: 1px solid #fff; 
} 
.ns_row_type_1 { 
    background-color: #ccc; 
} 
.ns_field_name { 
    width: 100px; 
    padding: 3px; 
    border-right: 1px solid #fff; 
} 
.ns_field_value { 
    width: 280px; 
    padding: 3px; 
} 

フルCSSとHTMLがにあります何が起こっているの？

ありがとうございます！

Answer 1

あなたは本当に、これはあなたが表示しようとしているデータのテーブルであるとして、ここではHTMLのTABLEを使用する必要があります。厄介なハックとしてしかし

、ns_field_valueに...

.ns_field_value {width: 280px; padding: 3px; margin-left:-4px; border-left:1px solid #fff}

これを変更するだけのborder-leftフィールドの値が 'セル' にを追加してから行います - 境界線が重なり合って1つの境界線が作成されるように4pxマージンを設定します。

Answer 2

オプション1：フロート、余分な境界、および1ピクセル負マージン

• http://jsfiddle.net/95uMq/

オプション2：CSS3

• http://jsfiddle.net/95uMq/1/

オプション3：表ベースのレイアウト

• http://jsfiddle.net/95uMq/2/