css - getskeleton - 响应列与底部对齐

Question

这是一个挑战！

我目前正在使用 GetSkeleton 并且有 3 个基本列

<div class="container">
    <div class="one-third column box1">
    Some text<br/>
    </div>
    <div class="one-third column box2">
    Some text
    </div>
    <div class="one-third column box3">
    Some text<br/>
    Some text<br/>
    Some text<br/>
    Some text<br/>
    </div>
</div>

您会注意到，框 3 中有更多内容。我怎样才能使框 1 和框 2 与底部对齐 - 但要保持响应。

Answer 1

不确定您是否找到了解决方案，我假设您希望“Box1 和 2”与“Box 3”等高。我使用 Equal Heights 插件，它将跟踪我最高的 div 并调整下一个相应地。

这里是：

(function($) {
$.fn.equalHeights = function(minHeight, maxHeight) {
    tallest = (minHeight) ? minHeight : 0;
    this.each(function() {
        if($(this).height() > tallest) {
            tallest = $(this).height();
        }
    });
    if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
    return this.each(function() {
        $(this).height(tallest).css("overflow","auto");
    });
}

})(jQuery);

然后用这个调用它：

$(".box").equalHeights(250);

基本上这里发生的事情是你正在为你的 div 设置一个类框（对我来说，“盒子”是我用于所有盒子 div 的东西。然后我看看最小高度是多少并将其设置为那个。Wallah ! 等高框。

希望这可以帮助。