Question

给出以下标记：

<blockquote>This is a quote, and it's probably going to 
flow over multiple lines</blockquote>

是否可以仅使用CSS将图像添加到左侧，并为整个引号添加边距，使其不会环绕图像。

要求类似于How to do a 'float: left' with no wrapping?，除了我想完全通过CSS（它是CMS生成的内容，因此添加其他元素证明有问题）。

这是我到目前为止所拥有的内容（jsfiddle）：

blockquote::before {
    content: "";
    width: 25px;
    height: 25px;
    margin: 0 10px 0 0;
    display: block;
    float: left;
    background: #999;
}

除了避免包装之外，其他所有内容。

编辑：我正在使用::before而不是简单地指定填充+背景图像，因为我要使用的背景图像是sprited，这样做会允许精灵中的其他图像出现。

Answer 1

而不是float: left使<blockquote>相对定位而:before绝对定位。 right: 100%规则始终将:before定位在<blockquote>的左侧。当然，它需要一个保证金。

http://jsfiddle.net/ExplosionPIlls/mg2qh/3/

Answer 2

我可能完全错了，但如果我正确地理解了你的问题，你就会过度复杂化，this would be what you ask。只需在blockquote上设置填充并使用背景......？

如果背景是sprited，因此需要固定大小use absolute positioning like this。

Float ::在内容之前没有包装

2 个答案: