在两个嵌套的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*/
}

- Tim Koelkebeck

Answer 1

使用 div 元素作为分隔符。这样无论左右两侧的 div 元素高度是否相等，它都会始终在垂直方向上居中。你可以在网站的任何位置重复使用它。

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

请查看http://jsfiddle.net/gtKBs/以获取可行示例。

- Hussein

---

太完美了！我就差一点就做到了，只是没想到尝试绝对定位。谢谢！ - Tim Koelkebeck

这太棒了！如此干净简洁。 - duyn9uyen

Answer 2

尝试这个。我将蓝色框设置为右浮动，给左右设置了固定高度，并在左侧div的右侧添加了白色边框。还添加了圆角以更好地匹配您的示例（这些在ie 8或更低版本中不起作用）。我还删除了position: relative。你不需要它。块级元素默认设置为相对位置。

在这里查看：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;
}

- Adam

---

谢谢，我会用这个玩一下，然后回来和你联系。我宁愿不设置固定高度。我确实有圆角的CSS，只是想列出与问题相关的代码。将来我应该使用JSFiddle来提问，非常好用。 - Tim Koelkebeck

Answer 3

想不出只有CSS解决方案，但你能不能在那两个元素之间加一个div，并在CSS中设置属性，使其看起来像图像中的线条？如果你正在将div用作表格单元格，那么这是一个相当简单的问题解决方案。

- John

---

我一直在尝试在两个div之间插入一个div，但总是出现问题。要么右侧的div被推到左侧和中间div下面，要么白线两侧的边距不对齐。 - Tim Koelkebeck

哎呀，本来想换行的...不管怎样，这似乎应该很简单，但实际上并不是，这让我觉得可能是我做错了什么。 - Tim Koelkebeck