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

前端之家收集整理的这篇文章主要介绍了html – 插入两个嵌套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: auto; /*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/

原文链接:https://www.f2er.com/html/233328.html

猜你在找的HTML相关文章