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的底部对齐。

将按钮与jquery对齐

1 个答案: