Html CSS中的等高垂直线

在页脚部分，我有一个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中有可能有相等的垂直线吗？需要一个已解决的链接来显示它是如何可能的。

不是直接的。但是您可以将包含行的背景添加到包含列的列表中。

您可以在div之间放置一个唯一的分隔符元素，该元素具有固定的高度

比如：

---

由于您尚未提供标记，因此我只能假设您可以尝试以下操作：

假设您的标记如下所示：

<div class="footer">
    <div class="footerSection">
        <ul>
            <li><a href='#' >Contact </a></li>
            <li><a href='#' >Delivery </a></li>
        </ul>
    </div>
    <div class="footerSection">
       <ul>
            <li><a href='#' >FeedBack</a></li>
            <li><a href='#' >Bonus Points</a></li>
            <li><a href='#' >Team </a></li>
            <li><a href='#' >Service </a></li>
        </ul>
    </div>
    <div class="footerSection">
        <ul>
            <li><a href='#' >Support Center </a><li>
            <li><a href='#' >Order Notes </a></li>
            <li><a href='#' >NewsLetter</a></li>
        </ul>
    </div>
    <div style="clear:both">
    </div>
</div>

.footer{
    min-width:500px;
    border:1px solid #CCC;
    text-align:center;
    padding:0;
    margin:0;
}
.footerSection{
    border-right:1px solid #CCC;
    min-height:140px;
    width:30%;
    padding:0;
    margin:0;
    float:left;
}
.footerSection:last-child{
    border:none;
}
.footerSection ul {
   list-style:none;
    padding:0;
    margin:0;
}

---

参见

您是指StackOverflow的页脚中的类似内容吗？新的HTML5元素不可能做到这一点吗？

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

表格单元格

方法

.cont-2{
显示：表格；
}
.cont-2.col{
显示：表格单元格；
左边框：1px纯黑；
宽度：200px；
}
苹果
橙色
桃
皮卡丘
苹果
橙色
桃
西红柿

您尝试过这样的CSS吗

.footer {
    display: table;
    width: 540px;
    height: 150px;
    border-collapse:collapse;
}

.pane {
    display: table-cell;
    border-left:1px dashed #000;
    padding-left: 30px;
    width: 180px;
}

HTML示例

<div class="footer">
    <div class="pane">
        <p>Contact</p>
        <p>Delivery</p>
    </div>
    <div class="pane">
        <p>Feedback</p>
        <p>Bonus Points</p>
        <p>Team</p>
        <p>Service</p>
    </div>
    <div class="pane">
        <p>Support Center</p>
        <p>Order Notes</p>
        <p>Newsletter</p>
    </div>
</div>

接触

交付

回馈

加分

团队

服务

支持中心

订单

时事通讯

最简单-使它们都具有相同的固定高度谢谢大家。他们的许多解决方案都是正确的@太谢谢你了。。我一个接一个地试了。。从您的解决方案来看，它运行良好。

.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>

.footer {
    display: table;
    width: 540px;
    height: 150px;
    border-collapse:collapse;
}

.pane {
    display: table-cell;
    border-left:1px dashed #000;
    padding-left: 30px;
    width: 180px;
}

<div class="footer">
    <div class="pane">
        <p>Contact</p>
        <p>Delivery</p>
    </div>
    <div class="pane">
        <p>Feedback</p>
        <p>Bonus Points</p>
        <p>Team</p>
        <p>Service</p>
    </div>
    <div class="pane">
        <p>Support Center</p>
        <p>Order Notes</p>
        <p>Newsletter</p>
    </div>
</div>