自動調整高度，以兒童的身高（jQuery的）

我有一個HTML代碼：自動調整高度，以兒童的身高（jQuery的）

<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加載picure比文本跨距中的文本更高。然而，後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中），但它不起作用。

我做錯了什麼？

來源

2011-11-01 Johann Bauer

我認爲你必須等待所有圖像加載到能夠做到這一點。嘗試綁定到每個圖像的'load'事件。 – bfavaretto

您已經將內容從流中提取出來。您需要清除浮動才能恢復正常的內容流。嘗試將<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>

來源

2011-11-01 16:41:56 mrtsherman

這是一個小提琴，這樣你就可以看到我的意思了。由於這是一個佈局問題，你真的不應該使用JavaScript來糾正佈局。修復問題的根源！ - http://jsfiddle.net/bD9EV/ – mrtsherman

真的，從來沒有使用JS來糾正時，可以避免佈局問題:) –

您不能設置在jQuery的元素的height與height() = someValue。實際上，在=運算符的左側進行函數調用是毫無意義的。

改變這一行：

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

這樣：

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

來源

2011-11-01 16:42:16 namuol

http://jsfiddle.net/SGEtA/1/ ...沒有必要的PX雖然： P –

啊謝謝。忘記它包括那一點。 – namuol

另外，感謝您幫助我發現placehold.it！很有用。 – namuol

自動調整高度，以兒童的身高（jQuery的）

回答

相關問題