两个 div 之间的垂直线 - CSS

在 web 开发中，很多时候我们需要在两个 div 元素之间加入一条垂直分割线，以分隔两个内容区域，这时我们可以通过 CSS 来实现。

方法一：使用 border

我们可以给其中一个 div 元素添加一个 border-right 属性来实现垂直分割线的效果。

.div1 {
  float: left;
  width: 50%;
  height: 300px;
}

.div2 {
  float: left;
  width: 50%;
  height: 300px;
  border-right: 1px solid #ccc;
}

上面代码中，我们给第二个 div 元素添加了一个 border-right 属性，设置为 1 像素的实线，颜色为 #ccc。这样就实现了两个 div 元素之间的垂直分割线。

方法二：使用伪元素

另一种实现方式是使用 CSS 伪元素 ::before 或 ::after 来实现垂直分割线的效果。

.div1 {
  float: left;
  width: 50%;
  height: 300px;
}

.div2 {
  float: left;
  width: 50%;
  height: 300px;
  position: relative;
}

.div2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #ccc;
}

上面代码中，我们给第二个 div 元素添加了一个 ::before 伪元素，并设置其 content 属性为空，以保证其不会影响页面布局。然后设置其 position 属性为 absolute，并将其左侧与父元素对齐。接着设置 top 和 bottom 属性为 0，以使其垂直铺满整个父元素。最后设置 width 和 background-color 属性实现分割线的效果。

总结

使用以上两种方法，我们可以灵活地实现两个 div 元素之间的垂直分割线。根据实际情况选择适合自己的方式即可。