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

  • Post author:
  • Post category:其他


我有浮动左和浮动右< 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: auto; /*needed so that div stretches with child divs*/

}