Html 使用 CSS 的浮动 DIV 之间的垂直边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18039463/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical border between floating DIVs using CSS
提问by Greeso
I have the following HTML structure
我有以下 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>
I also have the following CSS
我也有以下 CSS
#parent {
width: 800px;
position: relative;
}
#child-1 {
width: 500px;
float: left;
}
#child-2 {
width: 200px;
float: left;
}
.clear {
clear: both;
}
Now, the contents of the child DIVs (child-1and child-2) could be anything, so eventually child-1might have longer height than child-2, or child-2might have a longer height than child-1.
现在，子 DIV 的内容（child-1和child-2）可以是任何内容，因此最终child-1 的高度可能比child-2 长，或者child-2 的高度可能比child-1 长。
What I want to do, is have a vertical line between child-1and 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-1and left border for child-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.
我想要做的是在child-1和child-2之间有一条垂直线，这条线的长度与 DIV 的高度相同。我在两个 DIV 上都尝试了边框（child-1 的右边框和child-2 的左边框），但这不是一个好主意，因为在两个 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.
我怎样才能做到这一点？我也喜欢只在可能的情况下使用 CSS，不使用 jQuery 或 JavaScript。如果您认为需要额外的 DIV，那么这也可以。
Thanks.
谢谢。
回答by ralph.m
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 上都尝试了边框（child-1 上的右边框和 div-2 上的左边框，但这不是一个好主意，因为在两个 div 相互接触的地方，线条会显得很粗，然后在延伸部分变细.
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.
事实上，这是一个很好的方法。不过，最后一步是给右 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;
}
Another option is to use display: tableon the parent and then display: table-cellon the columns, and then have a single border line between them.
另一种选择是display: table在父项上使用，然后display: table-cell在列上使用，然后在它们之间使用单个边界线。
回答by AlexTR
The simple one:
简单的一个：
elements {
border-left: black solid 1px;
}
elements:nth-child(1) {
border-left: none;
}
回答by Sundaravel M
try to use
尝试使用
border-left:1px solid #color;
margin-left:2px;
and
和
border-right:1px solid #color;
margin-right:2px;
回答by Bhojendra Rauniyar
You could also give border-right: 1px solid #000;only to your first div if this div is longer than second div and if second div is longer you could assign border-left: 1px solid #000;only to your second div.
border-right: 1px solid #000;如果这个 div 比第二个 div 长，你也可以只给你的第一个 div，如果第二个 div 更长，你只能分配border-left: 1px solid #000;给你的第二个 div。
