javascript - 使用jquery对齐按钮

Question

我正在使用 jquery 来调整我页面上几个 div 的大小，以便它们匹配。然后我想使用 float: bottom 对齐 div 底部的按钮。高度调整工作正常，但我似乎无法弄清楚为什么 .css() 函数对我不起作用。以下是一些说明该问题的示例代码:

HTML:

<div class="box" style='border: solid'>
<p> there is text inside this box</p>
<button class="adjust">test Button</button>
</div>

<div class="box" style='border: solid'>
    <p> there is text inside this box</p>
    <p> there is text inside this box</p>
    <p> there is text inside this box</p>
    <button class="adjust">test Button</button>
</div>

JavaScript:

$(document).ready(function() {
            $maxh = 0;
            $(".box").each(function(){
                if($(this).height() > $maxh){
                    $maxh = $(this).height();
                }
            });
            $(".box").each(function(){
                $(this).height($maxh);
            });
            $(".adjust").each(function(){
                $(this).css("float", "bottom");
            });
        });

JSFiddle Demo

Answer 1

首先，CSS 中没有float: bottom 属性。

在您的具体示例中，您应该这样做:

.box { position: relative; }

.box button {
    position: absolute;
    bottom: 0;
}

这将强制您的按钮与包含它们的 div 的底部对齐。