CSS将跨度延伸到容器的高度

我已经并排设置了两个跨度元素，其中一个跨度应用了分隔边界。当一个跨度的线数大于另一个跨度时，就会出现问题。如果内容较少的跨度应用了边框，则边框不会延伸到容器底部

我尝试过在span、包含div、HTML和body标记的不同组合中添加height和minheight元素，但没有成功

以下是示例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和HTML位于：

有人知道发生了什么吗

---

谢谢

选项1：浮动、额外边框和1px负边距

备选案文2：CSS3

选项3：基于表格的布局

---

选项1：浮动、额外边框和1px负边距

备选案文2：CSS3

选项3：基于表格的布局

---

您确实应该在这里使用HTML表，因为这是您试图显示的数据表

然而，作为一种恶劣的黑客行为，将ns\u字段值更改为

.ns_字段_值{宽度：280px；填充：3px；左边距：-4px；左边距：1px实心35; fff}

---

这只是在字段值“cell”中添加一个左边框，然后执行-4px边距，以便边框重叠以创建一个边框。

您应该在此处使用HTML表格，因为这是您试图显示的数据表格

然而，作为一种恶劣的黑客行为，将ns\u字段值更改为

.ns_字段_值{宽度：280px；填充：3px；左边距：-4px；左边距：1px实心35; fff}

---

这只是在字段值“cell”的左边添加了一个边框，然后执行-4px边距，这样边框看起来会重叠，从而创建一个边框。

Span是一个内联元素，因此它的高度与它的内容相同。这对表格来说会更容易吗？您更喜欢哪一种：基于表格的布局（IE6兼容）还是CSS3（IE9+）尝试使用表格。这可能会对您有所帮助。Span是一个内联元素，因此它的高度仅与其内容相同。这会更容易处理表吗？您更喜欢哪一种：表基布局（IE6兼容）还是CSS3（IE9+）尝试使用表。这可能会对您有所帮助。我本来会使用表，但这是我被要求的。不用担心。我对佩塔的答案投了赞成票，因为选项1是相似的（但有浮动），他/她给出了一些有效的选择：）啊，是的，我正朝着使用选项1的方向前进，但当我看到额外的空白div只是为了清理而添加时，我选择了你的作为两个邪恶中较小的一个。无论如何，我也对Petah的答案投了赞成票，因为我很欣赏额外的选项和使用JSFIDLE在一个地方查看结果的方法再次感谢！我本想用一张桌子，但这是我要的。不用担心。我对佩塔的答案投了赞成票，因为选项1是相似的（但有浮动），他/她给出了一些有效的选择：）啊，是的，我正朝着使用选项1的方向前进，但当我看到额外的空白div只是为了清理而添加时，我选择了你的作为两个邪恶中较小的一个。无论如何，我也对Petah的答案投了赞成票，因为我很欣赏额外的选项和使用JSFIDLE在一个地方查看结果的方法再次感谢！谢谢-这是非常有洞察力的！谢谢-这是非常有洞察力的！

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