CSS带边框的等高div

目前，我正在使用负边距技术（例如），使我的水平div看起来具有相同的高度。这在一段时间内效果很好，但现在我必须给div添加边框，但是由于填充和负边距的组合，没有底部边框来拉伸背景

我用我的代码设置了一把小提琴：

HTML:

---

我看过很多不同的解决方案，我最初选择这个解决方案的原因是因为它支持旧的IE。有没有更多的纯CSS选项可以在所有浏览器中实现相同的边框高度？

我成功地获得了您想要的结果。这个解决方案是我第一次在这里看到的。唯一的问题是，您需要知道哪一列内容最多，才能使其正常工作。如果这种情况经常发生变化（例如：动态内容），您可能需要求助于Javascript解决方案。我已经发布了下面的代码，但您也可以在这里查看JSFIDLE：

纵队

纵队

纵队

纵队

纵队

纵队

/*CSS，宝贝*/
div.div-divs{
背景：#090；
位置：相对位置；
}
div.div-div div{
宽度：30%；
背景：#fff；
排名：0；
底部：0；
边框：1px纯红；
}
.一{
左：0；
位置：绝对位置；
}
.最长的{
左缘：70%；
}
.二{
位置：绝对位置；
左：35%；
}

---

希望这有帮助。

在每列中添加伪元素怎么样

.justified-divs div:after {
      content: '';
      display: block;
      width: 30%;
      height: 0;
      border-bottom: 2px solid red;
      position: absolute;
      bottom: 0;
      padding: 0 10px;
      margin-left: -10px;
}

.justized divs{
字号：0；
文本对齐：对齐；
-ms文本对齐：分布所有行；
文本对齐：分布所有行；
溢出：隐藏；
/*临时调试颜色*/
背景颜色：绿色；
位置：相对位置；
}
.合理的divs：之后{
/*拉伸div以使其具有相等的水平间距*/
内容：''；
宽度：100%；
显示：内联块；
}
.合理分区{
背景色：白色；
字体大小：14px；
垂直对齐：顶部；
显示：内联块；
文本对齐：左对齐；
*显示：内联；
/*旧的IE浏览器真的是一个问题吗？IE6和IE7几乎已经死了。@cimmanon，我同意，但客户端不=）。+1谢谢，这至少简化了我当前的代码。在将其标记为答案之前，我仍将等待社区是否提出任何其他建议，但现在就可以了。
.justified-divs {
    overflow: hidden; /* cut off the stretched background */
}

.justified-divs div {
    padding: 0 10px 9999px 10px; 
    margin-bottom: -9999px;
    *margin-bottom: -9999px;
}

<!-- HTML -->
<div class="justified-divs">
    <div class="one">
       <p>column</p>
    </div>
    <div class="two">
        <p>column</p>
        <p>column</p>
    </div>
    <div class="longest">
        <p>column</p>
        <p>column</p>
        <p>column</p>
    </div>
</div>

/* CSS, BABY */
div.justified-divs{
    background: #090;
    position: relative;
}

div.justified-divs div{
    width: 30%;
    background: #fff;
    top:0;
    bottom:0;
    border: 1px solid red;
}

.one{
   left:0;
   position: absolute;
}

.longest{
    margin-left: 70%;    
}

.two{
    position: absolute;
    left: 35%;     
}

.justified-divs div:after {
      content: '';
      display: block;
      width: 30%;
      height: 0;
      border-bottom: 2px solid red;
      position: absolute;
      bottom: 0;
      padding: 0 10px;
      margin-left: -10px;
}