htmlとcssで以下のような画像でdivを作る方法

Question

私はしたいと思いました。
私はdivを持っています。テキストがある画像がありますので、画像の左上隅にテキストが必要です。

<div> 
<img src=""/> then text text text text text .... 
</div> 

その他の方法がある場合は、私に知らせてください。

enter image description here

Answer 1

を与えるこの

{ 
    float:left; 
} 

またはHTMLでこれを試してみてください1。

<img style="float:left;"> 

Answer 2

あなたは<img>タグ使用のCSSの画像float:left;

.pic{ 
 
    float:left; 
 
    margin-right:10px; 
 
}

<div> 
 
<img src="http://lorempixel.com/400/200" class="pic"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu nunc leo. Nulla tristique consequat lacinia. Etiam viverra dapibus nulla, ac luctus magna lobortis ac. Praesent magna velit, volutpat sed varius sit amet, fermentum vitae odio. Mauris porttitor bibendum arcu, dictum pulvinar diam malesuada eu. Duis non tellus arcu, a consequat lacus. Aliquam suscipit nunc ut sem sollicitudin consectetur a id dolor. Suspendisse pretium dictum luctus. Cras dapibus ullamcorper facilisis. Sed turpis ante, interdum eget lacinia quis, tincidunt ut sapien. Fusce ornare molestie sodales. Cras semper ultrices mattis. Aliquam erat volutpat. Morbi mollis ultricies lobortis. 
 
Phasellus luctus posuere mauris id venenatis. Ut tempus tempor odio, sit amet fermentum enim porttitor vitae. Maecenas sodales sagittis risus vel tincidunt. Duis non sem nisi, sollicitudin commodo mi. Sed tempus egestas metus, eu elementum erat malesuada ac. Ut sed vulputate est. Nunc risus lectus, tempor ac ornare eget, convallis commodo nisi. Aliquam ut eros quis risus euismod vestibulum. Sed et mi a diam semper congue at sit amet massa. Morbi porta dolor eu justo blandit vitae tempus nisl porttitor. Donec et magna id felis lacinia cursus. 
 

 
Phasellus luctus posuere mauris id venenatis. Ut tempus tempor odio, sit amet fermentum enim porttitor vitae. Maecenas sodales sagittis risus vel tincidunt. Duis non sem nisi, sollicitudin commodo mi. Sed tempus egestas metus, eu elementum erat malesuada ac. Ut sed vulputate est. Nunc risus lectus, tempor ac ornare eget, convallis commodo nisi. Aliquam ut eros quis risus euismod vestibulum. Sed et mi a diam semper congue at sit amet massa. Morbi porta dolor eu justo blandit vitae tempus nisl porttitor. Donec et magna id felis lacinia cursus. 
 

 
In scelerisque luctus arcu ac volutpat. Cras in nisi lectus. Sed suscipit lorem non lorem accumsan semper. Phasellus et lacus non lacus pharetra imperdiet. Praesent aliquam porta magna, a interdum orci ultricies in. Curabitur sed arcu lacus, a pretium tellus. Curabitur ullamcorper tincidunt est nec sodales. Donec nisi leo, sollicitudin sed tristique in, rutrum vitae ligula. Quisque arcu nisl, ullamcorper dictum ultrices non, pulvinar vel diam. In hac habitasse platea dictumst. Suspendisse pellentesque, massa a faucibus condimentum, ligula lorem pretium tortor, non posuere urna odio eget est. Integer eget condimentum tortor. Vivamus hendrerit congue nisi semper gravida. 
 

 

 
</div>