我有向左浮动和向右浮动 <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*/
}
最佳答案
使用 div 作为分隔线。无论左右 div 的高度是否相等,它都将始终垂直居中。您可以在站点的任何位置重复使用它。
.divider{
position:absolute;
left:50%;
top:10%;
bottom:10%;
border-left:1px solid white;
}
在 http://jsfiddle.net/gtKBs/ 查看工作示例
关于html - 在两个嵌套的 div 之间插入垂直分隔线,而不是全高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5365123/