Question

我正在尝试浮动一个大的左侧卷曲引号，以便blockquote位于它的左侧。我有几个问题。

1）p标签中的文本继续环绕引号符号，即使我声明清楚：right;在blockquote上。我从来没有理解浮标应该如何工作所以有人可以就如何使其工作提出一些建议吗？

2）忽略上面的问题，里面的文本不与引号符号本身的顶部对齐，但是当我将margin-top应用于blockquote时，它根本不会移动。建议？

我知道我可以通过在blockquote上使用引号的背景图片来解决这个问题，但我想用文本来做这件事。

HTML：

<div class="quote_symbol">&ldquo;</div>

<blockquote>To be or not to be</blockquote>

<p>Some other text on the page below</p>

CSS：

.quote_symbol{font-size: 4.5em; float:left;}
blockquote{clear:right;}

Answer 1

假设您希望引号文本位于卷曲引号符号的右侧。如何将标记更改为：

<blockquote>
     <div class="quote_symbol">&ldquo;</div>
     To be or not to be
</blockquote>

<p>Some other text on the page below</p>

你的CSS：

blockquote              { position: relative; padding-left: 4.6em; }
blockquote.quote_symbol { position: absolute; top: 0; left: 0;
                          font-size: 4.5em; }

或类似的东西？

Answer 2

关于1），你应该在p而不是blockquote上设置clear:right。

关于2），请尝试使用padding-top:0而不是margin-top:0。

试图留下一个左卷曲的引用，但有一些问题

2 个答案: