html - CSS中的等高垂直线

Question

在页 footer 分，我有 3 个 div(带链接)水平相邻(float:left;)。

每个 div 都有不同数量的链接。例如，

   Div1           Div2              Div3  
|  Contact    |   Feedback      |   Support Center
|  Delivery   |   Bonus Points  |   Order Notes
              |   Team          |   Newsletter
              |   Service  

这里的 Div1 只有 2 个链接，左边的垂直线很短。 div2 有 4 个链接，垂直线很大，div3 有 3 个链接，基于链接太短。

我的 CSS 在下面有这个，

#footer_verticalLineSeparator {
border-left: 1px solid #CCCCCC;
height: 100%;
}

但我需要所有垂直线都需要相同的高度而不是添加图像。它需要如下所示。

   Div1           Div2              Div3  
|  Contact    |   Feedback      |   Support Center
|  Delivery   |   Bonus Points  |   Order Notes
|             |   Team          |   Newsletter
|             |   Service       |
|             |                 |

在 CSS 中是否可以有相等的垂直线？需要一个已解决的链接来展示它是如何实现的。

Answer 1

如果您的列的高度是固定的，您可以使用 Manish Mishra 的方法。如果您的列必须跟随其内容的高度，您可以使用 table-cell 方法。

http://jsfiddle.net/xFSe8/

.cont-2 {
    display:table;
}

.cont-2 .col {
    display:table-cell;
    border-left:1px solid black;
    width:200px;
}

<div class = "cont-2">
    <div class = "col col-1">
        <a>Apple</a>
        <a>Orange</a>
        <a>Peach</a>
    </div>

    <div class = "col col-2">
        <a>Pikachu</a>
    </div>

    <div class = "col col-3">
        <a>Apple</a>
        <a>Orange</a>
        <a>Peach</a>
        <a>Tomato</a>
    </div>
</div>