将<p>对齐图像不起作用

Question

我有一个段落,我使用引用图像作为背景和<p>标签中的大量文本.我试图在<p>标签之前显示图像,所有文本对齐到图像的右侧,但图像似乎在其中显示,这是我不想要的.我创建了一个小提琴,让它更容易看到: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

这里有一个图像放大(引用保持不变):演示

此外,我想指出您正在使用弃用的方法来调整图像大小 - 请使用CSS来执行此操作而不是width/ heightattributes.

最后一件事:除非你使用的是XHTML doctype,否则你不需要在某些元素的末尾加上正斜杠.这是一种古老的自闭标签方法,但HTML5 doctype并不需要它.:)