试图左浮动左卷曲报价，但有一些问题

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），你应该页上，而不是块引用设置clear:right。

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