meilleure façon de créer un bloc de texte sur la gauche et l'image sur la droite?

Question

Je veux créer une division avec du texte sur la gauche et une image sur la droite. Le div est d'environ 300px de hauteur. J'essaie différentes façons, mais je préférerais suivre les normes pour ce genre de format. Je vous remercie.

HTML

<div id="early"> 
    <h3> Napoleon's Origins </h3> 
    <br> 
    <br> 
    <p>Napoleon Bonaparte was born in his family's ancestral home on August 15, 1769.</p> 
</div> 

CSS

#early { 
    margin-right: 250px; 
    height: 250px; 
    background: url(../images/Napoleon_23yrs.jpg); 
    background-repeat: no-repeat; 
    background-position: right; 
    background-size: 160px 225px; 
    line-height: 3px; 
} 

Answer 1

Créer une div et appliquer display: inline-block à l'étiquette de paragraphe. L'image suivante s'alignera automatiquement à droite du texte.

Demo

---

HTML:

<div class="content"> 
<p>Napoleon Bonaparte was born in his family's ancestral home on August 15, 1769.</p> 
<img src="DD1_mini.jpg"></img> 

CSS:

.content {height:300px; width:auto; } 
.content p {display:inline-block; vertical-align:top;} 

Answer 2

3 + 4 = 7 et aussi 5 + 2 = 7 Les choses sont tout simplement dépend comment vous mettre en œuvre. J'utilise toujours cette méthode -

<p>Lorem ipsum <img src="image.jpg" class="right"></p> 

Où css sera

.right { display: inline-block; float: right }