CSS將容器跨度拉伸至容器高度

我已經將兩個跨度元件並排放置，並將分隔邊界應用於其中一個跨度。當一個跨度比另一個跨度多時，會出現問題。如果內容較少的跨度是應用邊界的跨度，則邊界不會伸展到容器的底部。CSS將容器跨度拉伸至容器高度

我試着在跨度，包含div，HTML和正文標記以各種組合的方式添加高度和最小高度元素，但沒有成功。

下面是示例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：

.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是：

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

人有一個想法發生了什麼事？

謝謝！

來源

2012-02-17 Yazmin

跨度是一個內聯元素，因此它的高度只有它的內容。這會更容易處理表嗎？ – 2012-02-17 04:30:51

你更喜歡哪一種：桌面基礎佈局（IE6兼容）或CSS3（IE9 +） – Petah 2012-02-17 04:37:33

嘗試使用table.It可能會幫助你。 – NewUser 2012-02-17 04:39:26