計算された高さに表示されているdivの下のスペースを取り除く方法

Question

計算された高さの画像を含むdivがあり、画像の一部（100％-197px）のみを表示できます。私の問題は、私の計算された高さdivの下にあるテキストが画像の下に直接現れず、空のスペースを残していることです。ここで

はjsfiddle

で、ここに私のコードは、計算された高さに表示されたdivの下のスペースを削除する方法

<style> 
#div1 { 
    left: 300px; 
    height: calc(100% - 197px); 
    border: 1px solid black; 
    background-color: yellow; 
    float:left; 
    overflow:hidden; 
} 
#div1 img{ 
    height:auto; 
} 
.wrap{ 
    height:100vh; 
} 
</style> 

<div class="wrap"> 


    <div id="div1"> 
    <img src="http://externalapp.websoftghana.com/clean/decoupes/4000.jpg"> 
    </div> 



</div> 

<p>This text is supposed to appear right under the image but it goes down . How to solve it ?</p> 

のですか？

Answer 1

ソースの順序を変更したり、スタイルを変更することができます。立っていたときに、<p>タグが<div class="wrapper">要素の下にプッシュされていました。
http://jsfiddle.net/p8b5sb0t/4/

とコード：

<div class="wrap"> 
    <div id="div1"> 
    <img src="http://externalapp.websoftghana.com/clean/decoupes/4000.jpg"> 
    </div> 
    <p>This text is supposed to appear right under the image but it goes down . How to solve it ?</p> 
    </div>