Comment faire un texte dans un div div autour d'un autre div avec img et du texte

Question

Comment faire un texte dans un div autour d'un autre div et float ou inline-block ne fonctionne pas. C'est ce que je veux.

     ________ 
_____________________|  |_ 
Div: text text text | img | | 
text test text text |separate| | 
text test text text | div | | 
text test text text -------- | 
text test text text text test | 

C'est ce que j'ai.

     ________ 
_____________________|  |_ 
Div: text text text | img | | 
text test text text |separate| | 
text test text text | div | | 
text test text text -------- | 
text test text text    | 
text test text text    | 
text test text text    | 

Answer 1

Cela devrait vraiment être assez simple. Juste flotter le div ou img et appliquer un négatif margin.

body{background: red;} 
 

 
div { 
 
    width: 300px; 
 
    margin: 40px auto 0; 
 
    background: #fff; 
 
} 
 

 
img { 
 
    float: right; 
 
    margin: -20px 0 0 0; 
 
}

<div> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut laoreet massa nec massa commodo pretium. Proin vehicula enim ultrices nibh cursus commodo. Morbi orci 
 
    purus, posuere vel erat sit amet, viverra condimentum velit. Ut tincidunt mi ac ornare finibus. In vehicula, dolor ut rutrum egestas, lorem orci pulvinar velit, vel rutrum urna massa et augue. Integer vel dapibus diam. Quisque lorem sem, feugiat sed 
 
    accumsan non, condimentum vel est. Sed at ipsum nec eros pellentesque ullamcorper sed a eros. In in posuere dui. Suspendisse potenti. Quisque interdum, arcu eu congue lobortis, est metus consectetur tellus, nec sollicitudin justo mauris vehicula nunc. 
 
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
 

 
</div>

Answer 2

Essayez d'utiliser Ppadding/marge - je nous ai mis un stylo code ici:

Codepen

HTML

<div class="one"> 
    <div class="two"> 
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR2rju9r765Nbqd7MKVb2EGuAomXXBMqM5pBEhhLFiCnSjuP9R1eLLh5sU"/> 
    </div> 
    texttexttexttexttexttexttext<br/>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br/>texttexttexttexttexttexttexttext<br/>texttexttexttexttexttexttexttexttexttexttexttexttexttext<br/>texttexttexttexttexttexttext 
</div> 

CSS

.one{ 
    width:550px; 
    height:200px; 
    background-color:green; 
    margin-top:50px; 
    padding-right:100px; 
    word-wrap:word-break; 
} 
.two{ 
    float:right; 
    margin-right:-60px; 
    margin-top:-40px; 
    margin-left:10px; 
} 

Answer 3

Vous pouvez les faire deux divs séparés et appliquer flottant à la première div avec une largeur et une hauteur. qui est:

HTML

<div class="a"></div> 
<div class="b">TEXT TEXT TEXT<div> 

Ensuite, dans votre CSS

.a { 
    float: right; 
    width: 150px; 
    height: 150px; 
} 

Voici un fiddle