将<p>与图像无效对齐</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

这是放大图像的那个（引用保持不变）：Demo

此外，我想指出您正在使用弃用的方法来调整图片大小 - 请使用CSS执行此操作而不是width / height属性。

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

Answer 2

这可以解决问题：http://jsfiddle.net/charlesberube/YfTHK/3/

＆lt; p＆gt;上的背景图片需要移动以将其推过图像的右边缘，图像需要额外的右边距以帮助对齐文本。

.blockquote {
  ...
  background-position: 200px top;
  ...
}

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

这个解决方案有些脆弱，因为它取决于知道图像的大小，以便正确定位提供引用和对齐文本的背景图像;根据您的情况，这可能是也可能不是问题。

Answer 3

只更改一种CSS样式。 DEMO http://jsfiddle.net/yeyene/DSBqu/4/

旧CSS

background-position:left top;

新CSS

background-position:170px 5px;