css - 段落中的图像无法正常工作

Question

如果我将图像放在段落标记中而不对齐就可以正常工作。如果我对齐它，图像就会超出段落。问题是图像比文本大得多。

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

和 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

您的样式中有一个可能会破坏内容的右括号:“背景:黑色)；”