1

给定以下标记：

<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而不是简单地指定填充+背景图像，因为我要使用的背景图像是精灵，这样做会允许精灵中的其他图像出现。

4

2 回答 2

3

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

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

于 2013-05-07T23:05:23.867 回答
2

我可能完全错了，但是如果我正确理解了您的问题，那么您的问题就过于复杂了，这就是您要问的。只需在 上设置填充blockquote并使用背景...？

如果背景是精灵的，因此需要固定大小，请使用绝对定位，如下所示。

于 2013-05-07T23:05:49.583 回答