html – 插入两个嵌套div之间的垂直分隔线,不是全高

概述我有浮动左和浮动右< div>嵌套在浅蓝色框div中，如下图所示。我不知道如何在它们之间插入一条垂直线(如下图所示： http://screencast.com/t/0bRNOmjeE，因为我的sub-10声誉，所以SO不会让我嵌入)具有以下属性： 1)我可以控制或看起来合理的任何一侧的填充/边距(即，与其他div不太接近一个div) 2)如图所示留下上方和下方的边缘，即不延伸浅蓝色div的整个垂 我有浮动左和浮动右< div>嵌套在浅蓝色框div中，如下图所示。我不知道如何在它们之间插入一条垂直线(如下图所示： http://screencast.com/t/0bRNOmjeE，因为我的sub-10声誉，所以SO不会让我嵌入)具有以下属性：

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: @R_502_6843@; /*needed so that div stretches with child divs*/}

解决方法 使用div作为分隔线。无论左右的div高度相等，它都将始终垂直居中。您可以将其重用于您网站上的任何位置。

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

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

总结

以上是内存溢出为你收集整理的html – 插入两个嵌套div之间的垂直分隔线,不是全高全部内容，希望文章能够帮你解决html – 插入两个嵌套div之间的垂直分隔线,不是全高所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。