html – 插入两个嵌套div之间的垂直分隔线,不是全高
发布时间:2020-12-14 21:47:31 所属栏目:资源 来源:网络整理
导读:我有浮动左和浮动右 div嵌套在浅蓝色框div中,如下图所示。我不知道如何在它们之间插入一条垂直线(如下图所示: http://screencast.com/t/0bRNOmjeE,因为我的sub-10声誉,所以SO不会让我嵌入)具有以下属性: 1)我可以控制或看起来合理的任何一侧的填充/边距
我有浮动左和浮动右< 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/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |