Wie entferne ich den Raum unter einem Div, das auf einer berechneten Höhe angezeigt wurde

Question

Ich habe ein Div mit einem Bild mit einer berechneten Höhe, die es mir ermöglicht, nur einen Teil des Bildes (100% -197px) anzuzeigen. Mein Problem ist, dass der Text unter meiner berechneten Höhe div nicht direkt unter dem Bild erscheint, sondern einen leeren Raum hinterlässt.

Hier ist ein jsfiddle

und hier ist mein Code

<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> 

Wie der Raum unter einem div zu entfernen, die auf einer berechneten Höhe angezeigt wurde?

Answer 1

Sie können die Reihenfolge der Quellen ändern oder den Stil ändern. Wie es stand, wurde Ihr <p> Tag unter das <div class="wrapper"> Element geschoben.
http://jsfiddle.net/p8b5sb0t/4/

Und Code:

<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>