CSS 等高 div 带边框

Question

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

这是我用我的代码设置的小提琴：http: //jsfiddle.net/BvVKH/3/

HTML：

<div class="justified-divs">
    <div>
        <p>column</p>
    </div>
    <div>
        <p>column</p>
        <p>column</p>
    </div>
    <div>
        <p>column</p>
        <p>column</p>
        <p>column</p>
    </div>
</div>

相关CSS：

.justified-divs {
    overflow: hidden; /* cut off the stretched background */
}

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

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

Answer 1

我能够成功获得您想要的结果。 解决方案是我第一次看到这里概述的解决方案：http: //offshootinc.com/blog/2011/11/23/getting-100-column-height-with-css/ 。 唯一的问题是您需要知道哪一列是内容最多的列才能使其正常工作。 如果这种变化频繁（即：动态内容），您可能需要求助于 Javascript 解决方案。 我已经发布了下面的代码，但您也可以在这里查看 jsFiddle：http: //jsfiddle.net/mesPb/

<!-- 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%;     
}

希望这可以帮助。

Answer 2

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

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

 .justified-divs { font-size: 0; text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; overflow: hidden; /*temp debug colors */ background-color: green; position: relative; } .justified-divs:after { /* stretch divs to give them equal horizontal spacing */ content: ''; width: 100%; display: inline-block; } .justified-divs div { background-color: white; font-size: 14px; vertical-align: top; display: inline-block; text-align: left; *display: inline; /* <= IE7 hacks */ zoom: 1; /* <= IE7 hacks */ /* use large padding and equal size negative margin to keep column heights the same size as whichever is tallest */ padding: 0 10px 9999px 10px; margin-bottom: -9999px; *margin-bottom: -9999px; /*temp debug colors */ width: 30%; border: 2px solid red; } .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; }

 <div class="justified-divs"> <div> <p>column</p> </div> <div> <p>column</p> <p>column</p> </div> <div> <p>column</p> <p>column</p> <p>column</p> </div> </div>

我添加了position: relative; 在每个列.justified-divs和:after中。