Css 如何使 div 与单个页脚高度相同？

Question

我有这个，我想动态填充这个 div，但是 div panel-row-text 的高度不相等，我希望所有高度都相同(将采用更大的高度)并且我想要页脚将在同一水平或同一行。我正在尝试所有方法，但无法弄清楚。

<div class="panel">
    <div  class=panel-row>
        <div class="panel-row-Text">
        </div>
        <div class="panel-row-footer">
        </div>
    </div>
    <div class=panel-row>
        <div class="panel-row-Text">
        </div>
        <div class="panel-row-footer">
        </div>  
    </div>
    <div class=panel-row>
        <div class="panel-row-Text">
        </div>
        <div class="panel-row-footer">
        </div>  
    </div>
</div>

Answer 1

我一直在使用这个 JavaScript + jQuery 解决方案。虽然丑陋，但它适用于旧版浏览器。

 // Equalize the height of front page boxes
function tuneFrontPage() {

    //
    $('.frontpage-promo .well').height(function () {
        var maxHeight = $('.frontpage-promo .well').max( function () { return $(this).height(); });
        return maxHeight;
    });
}

从这里拿起它:https://stackoverflow.com/a/9189443/315168

CSS3 flexbox 可能是这个 http://www.html5rocks.com/en/tutorials/flexbox/quick/ 的现代解决方案(从 caniuse.com 检查您的目标受众的兼容性)