如何在两个div之间添加垂直线

Question

我想在两个div之间建立一条垂直线.对于水平线我们有"hr",但我认为没有垂直线.无论如何,我可以不使用边框吗？让我说我有这个代码的例子.

<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>

Answer 1

您还可以使用伪元素制作垂直分隔符.您不需要额外的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:注意伪元素的绝对定位.谢谢.

Answer 2

您可以使用<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;
}