Html 在两个嵌套的 div 之间插入垂直分隔线，而不是全高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5365123/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
insert vertical divider line between two nested divs, not full height
提问by Tim Koelkebeck
I have float left and float right <div>nested within a light blue box div as shown in the image below. I can't figure out how to insert a vertical line between them as shown in this image:
我将左浮动和右浮动<div>嵌套在浅蓝色框 div 中，如下图所示。我不知道如何在它们之间插入一条垂直线，如下图所示：
That has the following properties:
它具有以下属性：
1) padding/margin on either side that I can control or looks reasonable (i.e. not much closer to one div than it is the other)
1）我可以控制或看起来合理的任一侧的填充/边距（即与一个 div 的距离不比另一个更接近）
2) leaves a margin above and below as shown, i.e. does not extend the full vertical width of light blue div
2) 如图所示在上下留出边距，即不扩展浅蓝色div的整个垂直宽度
3) dynamically maintains #1 and #2 as browser window gets bigger/smaller and blue box size increases/decreases with it
3）随着浏览器窗口变大/变小和蓝框大小随之增加/减少，动态维护#1和#2
I'm looking for a simple, preferably CSS-only solution.
我正在寻找一个简单的，最好是纯 CSS 的解决方案。
Relevant 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*/
}
回答by Hussein
Use a div for your divider. It will always be centered vertically regardless to whether left and right divs are equal in height. You can reuse it anywhere on your site.
使用 div 作为分隔符。无论左右 div 的高度是否相等，它都将始终垂直居中。您可以在站点的任何位置重复使用它。
.divider{
position:absolute;
left:50%;
top:10%;
bottom:10%;
border-left:1px solid white;
}
Check working example at http://jsfiddle.net/gtKBs/
在http://jsfiddle.net/gtKBs/检查工作示例
回答by Adam
Try this. I set the blue box to float right, gave left and right a fixed height, and added a white border on the right of the left div. Also added rounded corners to more match your example (These won't work in ie 8 or less). I also took out the position: relative. You don't need it. Block level elements are set to position relative by default.
尝试这个。我将蓝色框设置为向右浮动，给左右一个固定的高度，并在左侧 div 的右侧添加了一个白色边框。还添加了圆角以更匹配您的示例（这些在 ie 8 或更少时不起作用）。我也拿出了位置：相对。你不需要它。块级元素默认设置为相对位置。
See it here: http://jsfiddle.net/ZSgLJ/
在这里看到它：http: //jsfiddle.net/ZSgLJ/
#left {
float: left;
width: 44%;
margin: 0;
padding: 0;
border-right: 1px solid white;
height:400px;
}
#right {
position: relative;
float: right;
width: 49%;
margin: 0;
padding: 0;
height:400px;
}
#blue_box {
background-color:blue;
border-radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius: 10px;
width: 45%;
min-width: 400px;
max-width: 600px;
padding: 2%;
float: right;
}
回答by John
Can't think of a only css solution, but couldn't you just had a div between those 2 and set in the css the properties to look like a line like shown in the image? If you are using divs as they were table cells this is a pretty simple solution to the problem
想不出唯一的 css 解决方案，但是您不能在这两个 div 之间设置一个 div 并在 css 中将属性设置为如图所示的一条线吗？如果您使用 div 作为表格单元格，这是该问题的一个非常简单的解决方案
