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

Question

我是以下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和child-2)的内容可以是任何内容,因此最终child-1的高度可能大于child-2,或者child-2的高度可能大于child-1.

我想要做的是,在child-1和child-2之间有一条垂直线,这条线的div长度更长.我尝试了两个div的边框,(对于child-1的右边框和div-2的左边框),但这不是一个好主意,因为线条会显得很粗,两个div相互接触,然后变薄部分.

我怎样才能做到这一点？我也喜欢只在可能的情况下使用CSS,没有jQuery和JavaScript.如果您认为需要额外的div,那么这是可以的.

谢谢.

Answer 1

我尝试了两个div上的边框,(在div-2上的child-1和左边框上的右边框,但这不是一个好主意,因为在两个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在列上使用,然后在它们之间使用单个边界线.

Answer 2

简单的一个：

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

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