html - 将 与图像对齐不起作用

Question

我有一个段落，我在 <p> 中使用引述图像作为背景和大量文本。标签。我正在尝试显示图像，所有文本都与图像右侧对齐，在 <p> 之前标签，但图像似乎显示在其中，这是我不想要的。我创建了一个 fiddle 以使其更容易看到:JSFiddle

这是我的 CSS:

.container_12 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}

.blockquote {
    font-size: 14px;
    font-family: 'Times', serif;
    font-style: italic;
    color: #222222;
    background-color: #f7f7f7;
    background-image: url(http://somesite/Icon_Quote.png);
    background-position: left top;
    background-repeat: no-repeat;
    min-height: 40px;
    padding: 10px;
    margin-bottom: 10px;
}

.QuoteTextToLeft {
    float: left;
    margin: 50px 10px 10px 10px;
}

和 HTML:

<div class="container_12">
<div>
    <img class="QuoteTextToLeft" src="http://someothersite/man.png"
      alt="" width="200" height="250" /> 
    <a id="andrew_reeder"></a>
    <p class="blockquote">START HERE - this is a test, ... (snipped)
        <br />
        <br />this is a test, a test of the emergency broadcast system....
        <br />
        <br />this is a test, a test of the emergency broadcast system....
        <br />
        <br />this is a test, a test of the emergency broadcast system....
        <br />
        <br />Someone who cares
        <br />
        <br />Some title</p>
</div>

我想做的是将图像显示在 <p class="blockquote"> 之外标记，以便引用图片位于显示“从这里开始”的位置。

这是它目前的样子:

我希望它看起来像这样:

Answer 1

最好不要将其设为背景图片。

.blockquote {
    font-size:14px;
    font-family:'Times', serif;
    font-style:italic;
    color:#222222;
    background-color:#f7f7f7;
    min-height:40px;
    padding:10px;
    margin-bottom:10px;
}
.blockquote:before {
    content:url('http://pokemonresource.wikinet.org/w/images/pokemonresource/uploads/a/a8/Icon_Quote.png');
    margin-right:10px;
    float:left;
}

这是一个 CSS3 解决方案...我们正在利用 :before 伪类来指定在每个 .blockquote 元素之前添加的内容。

我们将 content 属性设置为图像的 url(取决于它是什么类型的文件，你会得到不同的结果——因为这是一个 png 文件，它显示图像定期)。

为了让引号的其余部分换行而不仅仅是第一行，我们使用 float:left。最后，为了调整间距，我们添加了右边距。

这适用于任何尺寸的图像。

这是原始版本的修改版本:Demo

这是一张放大了的图片(引用保持不变):Demo

此外，我想指出您正在使用已弃用的方法来调整图像大小——请使用 CSS 而不是 width/height 属性。

最后一件事:除非您使用的是 XHTML 文档类型，否则您不需要在某些元素的末尾使用正斜杠。这是一种古老的自闭合标签方法，但 HTML5 文档类型不需要它。 :)