テキストがテキストの右側に配置されないCSSがあります

Question

私はイメージがあり、テキストをその右側に置いています。 私は以下のコードを持っています、なぜそれは動作していないのですか？ マイフィドル： http://jsfiddle.net/a2kjtuet/2/#&togetherjs=zvUcL6sQOE

.posText { 
position: absolute; 
top: 200px; 
left: 0; 
width: 100%; 
} 

<img src="http://www.placecage.com/100/100"/> 

    <h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>  
    <p>Vestibulum vehicula odio quis ante pellentesque pharetra. Duis congue nibh in nisl iaculis iaculis. Nunc cursus est ut leo sollicitudin euismod.<br> 

    Maecenas commodo dui sed interdum placerat. Duis nec semper nunc. Fusce at volutpat eros.Etiam tincidunt nulla ut mauris pellentesque, nec ullamcorper dolor scelerisque. Praesent semper pharetra viverra. <br> 

    <b>Ut fermentum sodales felis quis rutrum.</b> 
    </p> 

    </div> 

Answer 1

使用CSSフレキシボックスを残しました。

.posText { 
 
    display: flex; 
 
} 
 

 
img { 
 
    flex-basis: 100px; 
 
    align-self: flex-start; 
 
} 
 

 
.text-container { 
 
    margin-left: 10px; 
 
} 
 

 
h4 { 
 
    margin-top: 0; 
 
}

<div class="posText"> 
 
    
 
     <img src="http://www.placecage.com/100/100"/>  
 
    <div class="text-container"> 
 
     <h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4> 
 

 
<p>Vestibulum vehicula odio quis ante pellentesque pharetra. Duis congue nibh in nisl iaculis iaculis. Nunc cursus est ut leo sollicitudin euismod.<br> 
 

 
Maecenas commodo dui sed interdum placerat. Duis nec semper nunc. Fusce at volutpat eros.Etiam tincidunt nulla ut mauris pellentesque, nec ullamcorper dolor scelerisque. Praesent semper pharetra viverra. <br> 
 
    
 
<b>Ut fermentum sodales felis quis rutrum.</b> 
 
</p> 
 

 
</div> 
 
    </div>

・ホープ、このことができます：以下のスニペットを見て！

Answer 2

スタイルは、フロートと画像は

<img style="float:left;" src="http://www.placecage.com/100/100"/>