整理列上的CSS分隔符

Question

我有两列，每侧浮动一列，我想使用1px宽度的行分隔符，它从最长列的顶部到底部。

我宁愿远离TABLE布局，也不知道哪一个是最长的列，或者它会有多长。

我怎么能用css做到这一点？

http://jsfiddle.net/AhfXc/2/

Answer 1

像这样的东西

.colright{ 
    float: right;
    border-left: 1px solid gray;
    left: -1px;
    position:relative;
}

http://jsfiddle.net/AhfXc/18/

Answer 2

您可以通过在父母div周围放置父母{{1}}并给父母一张背景图片来伪造它，该背景图片是200px宽，1px高图像，中间有一个1px黑/灰点。

Answer 3

CSS可以实现这一点。这是我的示例版本：http://jsfiddle.net/AhfXc/15/

基本上，只需将分隔符绝对定位在父容器中（使父位置相对，这样就可以了）。然后将孩子连接到顶部和底部，顶部为：0和底部：0。您可以将分隔符背景设置为您想要的颜色，但我使用了边框样式，因为您可以轻松应用虚线/点样式如果你愿意的话。

这仅在列具有已知的绝对或相对宽度时才有效，因为分隔符的水平位置不受它们的直接影响，但如果是这种情况，则它是一个相当简单的解决方案。 / p>