如何使用CSS创建一条以两列的分界线为中心的垂直分界线

Question

布局是两列，均为47.5%，左列有5%的边距。我想要一条垂直的分界线在中间。我目前使用的是右边框，但边框在边缘的左边缘，所以它是偏移的，而不是居中的？。

我使用Wordpress Divi主题，但以下HTML/CSS是我问题的关键：

<style>
.col-left {float:left;width:47.5%;margin-right:5%;border-right:3px solid #fff;height500px}
.col-right {float:left;width:47.5%;height500px}
</style>
<div class="col-left"></div>
<div class="col-right"></div>

Ben

Answer 1

更改CSSmargin-right:2.5%; padding-right:2.5%;

.col-left {float:left;width:47.5%;margin-right:2.5%;padding-right:2.5%;border-right:3px solid #fff;height500px}