两个 div 之间的垂直线间隔答案

【问题标题】：Vertical line spacer between two divs两个 div 之间的垂直线间隔
【发布时间】：2010-10-26 00:24:53
【问题描述】：

所以我有两个 div。一个带有导航链接的左侧 div 和一个根据您在左侧单击的链接填充内容的右侧 div。我想在导航和将两者分开的内容之间有一条垂直的灰线，但我需要它根据右侧内容 div 的长度来改变高度。（而且如果右侧没有导航那么长，则默认情况下将线转到导航的底部。

因此，如果用户单击使正确内容 div 非常长的链接，我需要垂直线动态更改其高度并一直向下，但如果内容没有导航我仍然需要它一直走到导航的尽头。

我正在尝试使用边框和高度：100% 的东西，但我无法让任何东西跨浏览器工作。（IE 和 FF）谢谢！

【问题讨论】：

标签： html css layout

【解决方案1】：

假设您的左侧导航 div 具有固定高度，或者不经常变化的高度。假设您的左侧导航 div 的高度为 400 像素。那么：

div.leftnav {
   height: 400px;
   float: left;
}

div.rightContent {
   min-height: 400px;
   border-left: 1px solid gray;
   float:left;
}

请记住，IE6 不支持“最小高度”。

【讨论】：

【解决方案2】：

父 div 的重复背景图像，带有适当位置的垂直灰线将是您的最佳选择。

【讨论】：

同意。如果正确的内容更长，固定高度解决方案将不起作用。父母的重复背景图像会更好。

【解决方案3】：

这个问题的答案可能会对你有所帮助：

Extending sidebar down page

【讨论】：

【解决方案4】：

我曾经通过使用在 y 轴上重复的背景图像解决了这个问题。只需将其创建为与您的页面一样宽，并且不是很高，可能是 10-20 像素。然后向下重复。可能有点作弊，但在某些情况下有效：p

您可以在 this website 上看到我如何做到这一点的一个示例。

【讨论】：

看起来我们（大致）同时有同样的想法！顺便说一句，我不认为这是在作弊，并且在某些方面，网络开发的目的是什么（即寻找“横向解决方案”）

【解决方案5】：

您可以让导航 div 在右侧有边框，而内容 div 在左侧有边框。让这两个边界重叠应该会产生预期的效果。

【讨论】：

这听起来像是最简单的解决方案，只需给其中一个 div 一个负边距作为边框宽度
我同意，这是一个比重复背景图像更优雅的解决方案。

【解决方案6】：

我这样做的方法是将元素放入隐藏溢出的容器 div 中。然后将左边框应用于所有重复的 div。然后，在所有浮动子元素上设置 css 属性： padding-bottom:2000px; margin-bottom-2000px;

例子：

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

<div class="vert-line>
  <div>Left Side</div>
  <div>Right Side</div>
</div>

希望这会有所帮助！

【讨论】：

jsfiddle.net/epeleg/VKqEU/1 显示了这一点并添加了详细信息，但如何使它在sperator 上方和下方有一些空间？

【解决方案7】：

你可以在右边的div上使用cssborder-left。

.vertical_line { border-left: 1px solid #f2f2f2; }

<div>
  <p>first div</p>
</div>
<div class="vertical_line">
  <p>second div</p>
</div>

【讨论】：