Question

我有这样的HTML代码：

<pre><div class="post" style="border-width:1px;border-style:solid">
 <div class="userpic" style="width:70px;float:left">
  <img src="XXX"><br>some text
 </div><!-- /userpic -->
 <span class="text"><h4>I'm a heading</h4>Just a few words.</span>
</div><!-- /post --> </pre>

有时，userpic-div中加载的图片高于text-span中的文本。然而，post-div与文本一样高。现在我希望它至少与userpic-div一样高。我尝试用jQuery做到这一点，这就是我的想法：

$(document).ready(function() {
   var elements = $('.post');
    elements.each(function(){
    userpic = $(this).children('.userpic');

        if($(this).height() < userpic.height()){
        $(this).height() = userpic.height();
            }
    });

 });

我没有错误（在Chrome中），但它不起作用。

我做错了什么？

Answer 1

你已经浮动内容，将其拉出流量。您需要清除浮动以恢复正常的内容流。尝试将<br style="clear: both" />添加到您的代码中，就在更多文本之后。

<pre><div class="post" style="border-width:1px;border-style:solid">
 <div class="userpic" style="width:70px;float:left">
  <img src="XXX"><br>some text
 </div><!-- /userpic -->
 <span class="text"><h4>I'm a heading</h4>Just a few words.</span>
 <br style="clear: both;" />
</div><!-- /post --> </pre>

Answer 2

您无法使用height在jQuery中设置元素的height() = someValue。实际上，在=运算符的左侧进行函数调用永远不会有意义。

更改此行：

$(this).height() = userpic.height();

到此：

$(this).css({height: userpic.height()});

自动调整高度到孩子的身高（jQuery）

2 个答案: