html - 带边框的 CSS 等高 div

Question

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

这是我用我的代码设置的 fiddle :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%;     
}

希望这对您有所帮助。