Fließender Text um ein Bild Problem

Question

Ich habe etwas Text, den ich um ein Bild wickeln möchte - ich verstehe, ich muss das Bild nach links schweben, um den Text zu zwingen, um es zu wickeln. Was ich auch immer mache, scheint nicht zu funktionieren.

Ich habe hier eine codepen einrichten: https://codepen.io/emilychews/pen/GmdZOb

-Code unten für eine schnelle Referenz.

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.outer { 
 
    width: 50%; 
 
    height: 50vh; 
 
    background: blue; 
 
} 
 

 
.inner { 
 
    display: block; 
 
    width: 25%; 
 
    height: 25vh; 
 
    background: red; 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 

 
p { 
 
    color: white; 
 
}

<div class="outer"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur </p> 
 
    <div class="inner">IMAGE</div> 
 
</div>

Answer 1

Sie müssen Ihr Bild vor dem Text setzen, so dass der Text an der Seite kann es schweben.

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.outer { 
 
    width: 50%; 
 
    height: 50vh; 
 
    background: blue; 
 
} 
 

 
.inner { 
 
    display: block; 
 
    width: 25%; 
 
    height: 25vh; 
 
    background: red; 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 

 
p { 
 
    color: white; 
 
}

<div class="outer"> 
 
    <div class="inner">IMAGE</div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur </p> 
 
</div>