画像がdivの高さに正しく調整されない

Question

画像の高さを隣接するdivの高さに設定しようとしています。

JavaScriptを使ってdivの高さを取得して画像の高さを設定した後でも、最後の<p>要素が画像の下に表示されるという問題があります。

$("#here").find('img').css("height", $(".text").outerHeight());

img { 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="here"> 
 
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" alt="RED"> 
 
    <div class="text"> 
 
    <h2>Movie: RED</h2> 
 
    <p>When his peaceful life is threatened by a high-tech assassin, former black-ops agent Frank Moses reassembles his old team in a last ditch effort to survive and uncover his assailants.</p> 
 
    <p>Movie Categories Action, Comedy, Crime</p> 
 
    <p>111 min long</p> 
 
    <p>Some actors were Bruce Willis, Mary-Louise Parker, Heidi von Palleske, Karl Urban</p> 
 
    <p>Rated: PG-13</p> 
 
    </div> 
 
    <br> 
 
    <input type="submit" value="Add"> 
 
</div>

あなたは、送信ボタンをクリックすることでhttp://thecodesee.pe.hu/で問題を再現することができます。ここで

---

は私の望ましい結果である：このソリューションをお試しください

Answer 1

：ここ

、それが現在のように見えるものです。

$.ajax({ 
     type: "POST", 
     url: "search.php", 
     success: function(data) { 
      $("#here").css("display", "block"); 
      $("#here").html(data).promise().done(function() { 
       $("#here").find('img').css("height", $(".text").outerHeight()); 
       var $img = $("#here").find('img'); 

       $img.on('load', function() { 
        $("#here").find('img').css("height", $(".text").outerHeight()); 
       }); 
      }); 

    } 
    }); 

Answer 2

画像のサイズは、ページが読み込まれたとき、または関数が呼び出されたときにのみ発生します。私はレイアウトに応じてイメージのサイズを変更するwindow.onresize（）イベントを記述する必要があると思います。

$(document).ready(function(){ 
      window.onresize = function(){ 
      $("#here").find('img').css("height", $(".text").outerHeight());  
      } 

     }); 

ただし、これは最初の負荷に対応していません。 divは、サイズが取得された後にレンダリングされるようです。そのpatricular

Answer 3

のためにあなたは、CSSの簡単なCSSのコードでそれを修正することができますあなたは）あなたがouterHeightをつかむ前に、DIVは（.ready使用することにより、）（レンダリングされたことを確認したい場合があります。以下のような幅の寸法を調整することで：

img { 
    float: left; 
    width: 25%; 
} 
.text { 

    width : 75%; 
}