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 的右边框和 child-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

简单的一个：

{{1}}

Answer 3

尝试使用

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

和

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

Answer 4

如果此div超过第二个div，您也可以仅将border-right: 1px solid #000;提供给第一个div，如果第二个div更长，则只能将border-left: 1px solid #000;分配给第二个div。

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

4 个答案: