使用 CSS 浮动 DIV 之间的垂直边框

我有以下 HTML 结构

<div id='parent'>
    <div id='child-1'>Some text goes here</div>
    <div id='child-2'>Different text goes here</div>
    <div class='clear'></div>
</div>

我还有以下 CSS

#parent {
    width: 800px;
    position: relative;
}

#child-1 {
    width: 500px;
    float: left;
}

#child-2 {
    width: 200px;
    float: left;
}

.clear {
    clear: both;
}

现在，子 DIV 的内容 (child-1 and child-2）可以是任何东西，所以最终child-1高度可能比child-2, or child-2可能有比child-1.

我想做的是在之间有一条垂直线child-1 and child-2，这条线的长度是高度较长的 DIV 的长度。我尝试了两个 DIV 的边框（右边框child-1和左边框child-2），但这不是一个好主意，因为在两个 DIV 相互接触的地方线会显得很粗，而在延伸部分则很细。

我怎样才能做到这一点？我还喜欢只在可能的情况下使用 CSS，而不使用 jQuery 或 JavaScript。如果您认为需要额外的 DIV，那么这也没关系。

Thanks.

我尝试了两个 div 上的边框（child-1 上的右边框和 div-2 上的左边框），但这不是一个好主意，因为在两个 div 彼此接触的地方，线条会显得很粗，然后在延伸部分会显得很细。

实际上，这是一个很好的方法。不过，最后一步是给右侧 div 一个 1px 的负左边距（假设边框为 1px 宽），以便两个边框重叠。

#child-1 {
    width: 500px;
    float: left;
    border-right: 1px solid gray;
}

#child-2 {
    width: 200px;
    float: left;
    border-left: 1px solid gray;
    margin-left: -1px;
}

另一种选择是使用display: table在父母身上，然后display: table-cell在列上，然后在它们之间有一条边框线。