CSS 如何在两个div之间添加垂直线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36029610/
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
how to add vertical line between two divs
提问by grasig
I want to make a vertical line between two divs. we have hrfor horizontal line but none for vertical line as I know. Is there anyway to make it without using border?
我想在两个divs之间做一条垂直线。hr据我所知，我们有水平线，但没有垂直线。有没有办法让它不使用border？
<style>
#wrapper_1 {
background-color:pink;
height:100px;
float:left;
width: 100px;
}
#wrapper_2 {
background-color:brown;
height:100px;
width: 100px;
float:right;
}
</style>
<div id="wrapper_1">
Creating slideshows PHP
</div>
<div id="wrapper_2">
Creating slideshows with WordPress
</div>
回答by vikrantnegi007
You can also use pseudo elements to make a vertical separator. You don't need an extra div to make a separator just use the pseudo elements and style it according to your needs.
您还可以使用伪元素来制作垂直分隔符。您不需要额外的 div 来制作分隔符，只需使用伪元素并根据您的需要设置样式即可。
#wrapper_1 {
background-color: pink;
height: 100px;
float: left;
width: 100px;
}
#wrapper_1:after {
content: "";
background-color: #000;
position: absolute;
width: 5px;
height: 100px;
top: 10px;
left: 50%;
display: block;
}
#wrapper_2 {
background-color: brown;
height: 100px;
width: 100px;
float: right;
}<div id="wrapper_1">
Creating slideshows PHP
</div>
<div id="wrapper_2">
Creating slideshows with WordPress
</div>PS: Beware of the absolute positioning of the pseudo elements. Thanks.
PS：注意伪元素的绝对定位。谢谢。
回答by Szabolcs Páll
You can use <hr>, as it is semantically correct, and then use CSS to convert it to a vertical line.
您可以使用<hr>, 因为它在语义上是正确的，然后使用 CSS 将其转换为垂直线。
hr.vertical {
height:100%; /* you might need some positioning for this to work, see other questions about 100% height */
width:0;
border:1px solid black;
}
回答by simone_s1994
Create a new div between your two div and add this class:
在你的两个 div 之间创建一个新的 div 并添加这个类：
.vertical-row {
Float:left;
height:100px;
width:1px; /* edit this if you want */
background-color: your color
}
回答by simone_s1994
I am not a css hacker but this is how would I do it.. Please notice that you should use clear: both;after floating elements.
我不是 css 黑客，但这就是我的方法。请注意，您应该clear: both;在浮动元素之后使用。
HTML:
HTML:
<div class="container">
<div id="wrapper_1">
Creating slideshows PHP
</div>
<div class="seperator"></div>
<div id="wrapper_2">
Creating slideshows with WordPress
</div>
<div class="clearfix"></div>
</div>
CSS:
CSS:
#wrapper_1 {
background-color:pink;
height:100px;
float:left;
width: 100px;
}
#wrapper_2 {
background-color:brown;
height:100px;
width: 100px;
float:right;
}
.seperator {
height: 100%;
width: 1px;
background: black;
top: 0;
bottom: 0;
position: absolute;
left: 50%;
}
.container {
position: relative;
}
.clearfix {
clear: both;
}
DEMO: jsfiddle
演示：jsfiddle
回答by Crack_David
sure you can:
你当然可以：
just wrap the elements into a wrapper and make that one display:table-cell.
只需将元素包装到一个包装器中并制作一个 display:table-cell。
.bigwrapper{
display:table;
width:100%;
}
second: create another div width class "vr" between your two wrappers and style it as follows:
第二：在两个包装器之间创建另一个 div 宽度类“vr”，并将其样式设置如下：
.vr{
width:1px;
display:table-cell;
background-color:black;
height:100%;
}
Final Demo at:
最终演示在：
