css - 排序列上的 CSS 分隔符

Question

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

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

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

score 1 · Accepted Answer

像这样的东西

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

score 0 · Accepted Answer

您可以通过在两者周围放置一个父级并给父级一个背景图像来伪造它，div该图像将是一个 200 像素宽、1 像素高的图像，中间有一个 1 像素的黑/灰点。

score 0 · Accepted Answer

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

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

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

3 回答 3