使用jquery对齐按钮

Aligning button with jquery

本文关键字：按钮 对齐 jquery 使用      更新时间：2023-09-26

我正在使用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演示

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

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

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

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

相关文章：