8

我有以下 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，那么这是可以的。

谢谢。

4

4 回答 4

16

我在两个 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在列上使用，然后在它们之间使用一条边界线。

于 2013-08-04T03:40:59.210 回答
4

最简单的一个：

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

elements:nth-child(1) {
  border-left: none;
}
于 2016-11-29T21:45:14.033 回答
2

尝试使用

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

和

border-right:1px solid #color;
margin-right:2px;
于 2013-08-04T03:36:54.143 回答
1

border-right: 1px solid #000;如果这个 div 比第二个 div 长，你也可以只给你的第一个 div，如果第二个 div 更长，你可以border-left: 1px solid #000;只分配给你的第二个 div。

于 2013-08-04T08:26:48.687 回答