使用CSS的浮动DIV之间的垂直边框 [英] Vertical border between floating DIVs using CSS

问题描述

我有以下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

Now, I have the following css

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

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

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

.clear {
    clear: both;
}

现在，子div的内容（ / strong>和 child-2 ）可能是任何内容，因此最终child-1的高度可能高于child-2，或者child-2的高度可能高于child-1。

Now, the contents of the child divs (child-1 and child-2) could be anything, so eventually child-1 might have larger height than child-2, or child-2 might have a larger height than child-1.

我想要做的是在child-1和child-2之间有一条垂直线，这一行的div长度较长。我在两个div上尝试了边框，（右边框为孩子-1和左边框为div-2），但这不是一个好主意，因为线将出现厚，两个div相互接触，然后瘦的扩展部分。

What I want to do, is have a vertical line between child-1 and child-2, and this line has the length of the div that is of longer height. I tried border on both divs, (right border for child-1 and left border for div-2), but this is not a good idea, because the line will appear thick where the two divs touch each other and then thin for the extended part.

我该怎么办？我也喜欢使用CSS，如果可能的话，没有jQuery或JavaScript。如果你认为需要额外的div，那么这是确定的。

How can I do that? I also like to use CSS only if possible, no jQuery nor JavaScript. If you think extra divs are needed then this is ok though.

谢谢。

推荐答案

我在两个div上尝试了边框，（在孩子-1上的右边框和div-2上的左边框，但这不是一个好主意，因为线将显示为

I tried border on both divs, (right border on child-1 and left border on div-2, but this is not a good idea, because the line will appear thick where the two divs touch each other and then thin for the extended part.

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

That's a good way to go, actually. The final step, though, is to give the right div a negative left margin of 1px (assuming the border is 1px wide), so that the two borders overlap.

#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 parent，然后在列上显示 display：table-cell ，然后在它们之间有一个单一的边界线。

Another option is to use display: table on the parent and then display: table-cell on the columns, and then have a single border line between them.

这篇关于使用CSS的浮动DIV之间的垂直边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！