Html 两个div之间的垂直线间隔
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/860448/
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
Vertical line spacer between two divs
提问by
So I have two divs. One left div with navigation links and one right div that populates with content depending on what link you click on the left. I would like to have a vertical gray line between the navigation and the content separating the two, but I need it to change in height depending on how long the right side content div is. (And also if the right side isn't as long as the navigation, have the line go to the bottom of the nav by default).
所以我有两个div。一个左侧 div 带有导航链接，一个右侧 div 填充内容，具体取决于您在左侧单击的链接。我想在导航和分隔两者的内容之间有一条垂直的灰线，但我需要根据右侧内容 div 的长度来改变高度。（而且，如果右侧没有导航那么长，则默认情况下将该行转到导航底部）。
So if the user clicks on a link that makes the right content div really long, I need the vertical line to change its height dynamically and go all the way down, but if the content isn't as long as the nav i still need it to go all the way down to the end of the nav.
因此，如果用户单击使正确内容 div 非常长的链接，我需要垂直线动态更改其高度并一直向下，但是如果内容没有导航那么长，我仍然需要它一直到导航的末尾。
I was trying things with borders and height:100% but I couldn't get anything to work cross-browser. (IE and FF) Thanks!
我正在尝试带有边框和高度的东西：100% 但我无法跨浏览器工作。（IE 和 FF）谢谢！
回答by Jin
Assuming your left nav div has a fixed height, or a height that doesn't change often. Let's suppose your left nav div has a height of 400px. Then:
假设您的左侧导航 div 具有固定高度，或者高度不经常变化。假设您的左侧导航 div 的高度为 400 像素。然后：
div.leftnav {
height: 400px;
float: left;
}
div.rightContent {
min-height: 400px;
border-left: 1px solid gray;
float:left;
}
Keep in mind, "min-height" is not supported by IE6.
请记住，IE6 不支持“min-height”。
回答by da5id
A repeating background image for the parent div with a vertical grey line positioned appropriately would be your best bet.
具有适当定位的垂直灰线的父 div 的重复背景图像将是您最好的选择。
回答by tobbez
You could let the navigation div have a border on the right, and the content div have a border on the left. Letting those two borders overlap should give the desired effect.
您可以让导航 div 在右侧有一个边框，而内容 div 在左侧有一个边框。让这两个边界重叠应该会产生预期的效果。
回答by rkingon
The way I do this is to put the elements into a container div with overflow hidden. You then apply a left border to all repeating div's. Then, on all floating child elements you set the css properties: padding-bottom:2000px; margin-bottom-2000px;
我这样做的方法是将元素放入一个隐藏溢出的容器 div 中。然后将左边框应用于所有重复的 div。然后，在所有浮动子元素上设置 css 属性：padding-bottom:2000px; 边距底部 2000 像素；
Example:
例子：
CSS
CSS
div.vert-line{overflow:hidden}
div.vert-line>div+div{border-left:#color;}
div.vert-line>div{width:200px; float:left; padding-bottom:2000px; margin-bottom:-2000px;}
HTML
HTML
<div class="vert-line>
<div>Left Side</div>
<div>Right Side</div>
</div>
Hope this helps!
希望这可以帮助！
回答by Svish
i once solved this by using a background image repated on the y axis. Just create it as wide as your page and not very tall, maybe 10-20 pixels. and then just repeat it downwards. Kind of cheating maybe, but it works in some cases :p
我曾经通过使用在 y 轴上重复的背景图像解决了这个问题。只需将其创建为与您的页面一样宽且不要很高，可能为 10-20 像素。然后向下重复。也许有点作弊，但它在某些情况下有效：p
One example of how I did it you can see on this website.
你可以在这个网站上看到我是如何做到的一个例子。
回答by SamYah
you can use the css border-lefton the right div.
您可以border-left在右侧 div 上使用 css 。
.vertical_line { border-left: 1px solid #f2f2f2; }
<div>
<p>first div</p>
</div>
<div class="vertical_line">
<p>second div</p>
</div>
