イメージの周りのフローティングテキスト

Question

イメージを囲むテキストがあります - テキストを囲むようにイメージを左に浮動させる必要があることを理解しています。私が何をしてもうまくいかないのですか？

私はここcodepen設定しました：https://codepen.io/emilychews/pen/GmdZOb

コードクイックリファレンスについては、以下です。

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

テキストは、側面に沿って、それを浮上できるように、テキストの前に、あなたのイメージを配置する必要があります。

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