Image dans le paragraphe ne fonctionne pas comme il se doit

Question

Si je mets une image à l'intérieur d'une balise de paragraphe sans alignement fonctionne très bien. Si je l'aligne, l'image sort du paragraphe. Le problème est que l'image est BEAUCOUP plus grande que le texte.

<div id="main-paper-bg"> 
    <div id="content"> 
    <h1>After School Program</h1> 
    <p><img class="left-only" src="images/bgi/after-school/main-img.jpg" width="450" height="630" alt="Main Img" align="left">Coming Soon</p> 
    </div> 
</div> 

et CSS

#main-paper-bg { 
    width: 740px; 
    padding: 30px; 
    display: block; 
    float: left; 
    margin-bottom: 40px; 
} 

#content { 
    background: black; 
    height: auto; 
    text-align: left; 
    margin-left: auto; 
    margin-right: auto; 
    padding-right: 30px; 
    padding-left: 30px; 
    border: 1px solid #999; 
} 

p { 
    line-height: 160%; 
    padding-top: 0; 
    padding-bottom: 30px; 
    font-size: 12pt; 
} 


img.left-only { 
    border: none; 
    margin: 10px 10px 10px 0; 
    padding: 0; 
} 

Answer 1

vous n'avez pas besoin align="left" dans votre balise <img>. L'attribut align est également obsolète: utilisez css pour définir la hauteur, l'alignement et d'autres caractéristiques. Dans ce cas, vous n'avez pas besoin de l'aligner à gauche, car la valeur par défaut pour text-align est déjà left.

comme ceci: http://jsfiddle.net/SebastianPataneMasuelli/equ8p/1/

Answer 2

Vous avez un gros entre parenthèses dans vos styles qui peuvent être casser des choses: « fond: noir); »