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

我想在两个

div

s之间画一条垂直线。据我所知，水平线有

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>

#包装纸1{
背景颜色：粉红色；
高度：100px；
浮动：左；
宽度：100px；
}
#包装器2{
背景颜色：棕色；
高度：100px；
宽度：100px；
浮动：对；
}
创建幻灯片
使用WordPress创建幻灯片

在两个div之间创建一个新div并添加此类：

.vertical-row {
 Float:left;
 height:100px;
 width:1px; /* edit this if you want */
 background-color: your color
} 

---

您可以使用

，因为它在语义上是正确的，然后使用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;
}

当然你可以：

只需将元素包装到包装器中，并使其显示为table cell

.bigwrapper{
  display:table;
  width:100%;
}

第二：在两个包装器之间创建另一个div width类“vr”，并按如下方式设置样式：

.vr{
  width:1px;
  display:table-cell;
  background-color:black;
  height:100%;

}

最终演示在：

---

我不是css黑客，但我会这样做。。请注意，您应该使用

clear:both在浮动元素之后

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>

#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;
}

演示：
您还可以使用伪元素来创建垂直分隔符。您不需要额外的div来创建分隔符，只需使用伪元素并根据需要设置样式即可


#包装器_1{
背景颜色：粉红色；
高度：100px；
浮动：左；
宽度：100px；
}
#1：之后{
内容：“；
背景色：#000；
位置：绝对位置；
宽度：5px；
高度：100px；
顶部：10px；
左：50%；
显示：块；
}
#包装器2{
背景颜色：棕色；
高度：100px；
宽度：100px；
浮动：对；
}

创建幻灯片
使用WordPress创建幻灯片
如果您正在使用flex元素，并且由于显示：flex而导致元素转换为列时出现问题属性，在元素上使用
框阴影
属性，因为它不会添加到容器空间。
不使用边框似乎没有问题。这里的问题是高度是固定的，而不是动态的。也许这会引起一些问题。没错@crack\u david。最好的方法是稍微修改上面接受的答案，我只是在我的div左侧添加了下面的CSS行，我需要垂直线和volla，它的工作原理类似于charm“border left:2px solid lightgreen”；希望它能帮助一些人在您的示例中您可以想到bigwapper被转换成了一个表。包装器_1和包装器_2转换为表单元格。现在整件事就像一张桌子。这是一篇好文章：