html - 在两个嵌套的 div 之间插入垂直分隔线，而不是全高

Question

我有向左浮动和向右浮动 <div>嵌套在浅蓝色框 div 中，如下图所示。我不知道如何在它们之间插入垂直线，如下图所示:

具有以下属性:

1) 我可以控制或看起来合理的任一侧的填充/边距(即与另一个 div 的距离不比另一个更近)

2) 如图所示在上方和下方留出边距，即不延伸浅蓝色 div 的整个垂直宽度

3) 随着浏览器窗口变大/变小和蓝框大小随之增加/减小，动态维护#1 和#2

我正在寻找一个简单的、最好是纯 CSS 的解决方案。

相关 CSS:

#left {
  position: relative;
  float: left;
  width: 44%;
  margin: 0;
  padding: 0;
}

#right {
  position: relative;
  float: right;
  width: 49%;
  margin: 0;
  padding: 0;
}

#blue_box {
  position: relative;
  width: 45%;
  min-width: 400px;
  max-width: 600px;
  padding: 2%;
  margin-left: 40%;
  overflow: auto; /*needed so that div stretches with child divs*/
}

Answer 1

使用 div 作为分隔线。无论左右 div 的高度是否相等，它都将始终垂直居中。您可以在站点的任何位置重复使用它。

.divider{
    position:absolute;
    left:50%;
    top:10%;
    bottom:10%;
    border-left:1px solid white;
}

在 http://jsfiddle.net/gtKBs/ 查看工作示例