段落内の画像が正しく動作しない

Question

画像を整列せずに段落タグ内に置くと問題なく動作します。私がそれを整列させると、イメージは段落の外に出ます。問題は、Imageがテキストよりもはるかに大きいことです。

<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> 

そして、あなたはあなたの<img>タグでalign="left"を必要としない

#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

CSS。 align属性も廃止予定です：CSSを使用して、幅の高さ、配置などの機能を設定します。この場合、text-alignのデフォルト値はすでにleftであるため、左に揃える必要はありません。 http://jsfiddle.net/SebastianPataneMasuelli/equ8p/1/

Answer 2

あなたは物事を壊すことも、あなたのスタイルでクローズ括弧を持っている：そうのような

「背景：黒）;」