Html 使用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>

现在，child div（child-1和child-2）的内容可以是任何内容，因此最终child-1可能比child-2长，或者child-2可能比child-1长

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

我该怎么做？我也喜欢只在可能的情况下使用CSS，不使用jQuery或JavaScript。如果你认为需要额外的div，那么这是可以的

谢谢。

尝试使用

border-left:1px solid #color;
margin-left:2px;

及

我在两个div上都尝试了border（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

，然后在它们之间有一条单独的边框线。

如果第一个div比第二个div长，您也可以只给第一个div加上

border right:1px solid#000；

gn

左边框：1px实心#000；

仅适用于您的第二个分区。

简单分区：

elements {
  border-left: black solid 1px;
}

elements:nth-child(1) {
  border-left: none;
}

---

嗯，我倾向于

display:table

解决方案。我会试试，我可能还会问更多的问题：）如果第一个div大于第二个div呢？@Amal？在什么情况下？不管怎样，都没关系@格里索：负1px保证金是一种久经考验的方法，所以不要害怕它。：-）信不信由你，负边际解决方案有效，而显示表解决方案无效。我对第一个解决方案很满意。谢谢，拉尔夫但我不知道哪个是哪个，我无法控制内容。我不想使用jQuery或JavaScript来检查哪个比指定边框长。

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

elements {
  border-left: black solid 1px;
}

elements:nth-child(1) {
  border-left: none;
}