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

Question

我向左浮动并向右浮动<div>嵌套在浅蓝色框div中，如下图所示。我无法弄清楚如何在它们之间插入一条垂直线，如下图所示：

具有以下属性：

1）我可以控制或看起来合理的任何一方的填充/边距（即与一个div相比没有太多接近另一个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

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

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

检查http://jsfiddle.net/gtKBs/

处的工作示例

Answer 2

试试这个。我将蓝色框设置为向右浮动，左右两侧为固定高度，并在左侧div的右侧添加了白色边框。还添加了圆角以更符合您的示例（这些不适用于8或更少）。我也拿出了这个职位：亲戚。你不需要它。块级元素默认设置为相对位置。

请在此处查看：http://jsfiddle.net/ZSgLJ/

#left {
  float: left;
  width: 44%;
  margin: 0;
  padding: 0;
  border-right: 1px solid white;
  height:400px;
}

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

#blue_box {
  background-color:blue;
  border-radius: 10px;
  -moz-border-radius:10px;
  -webkit-border-radius: 10px;
  width: 45%;
  min-width: 400px;
  max-width: 600px;
  padding: 2%;
  float: right;
}

Answer 3

想不到一个唯一的css解决方案，但你不能只在那些2之间设置一个div并在css中设置属性看起来像图像中所示的一条线？如果你使用div作为表格单元格，这是一个非常简单的问题解决方案