Essayer de laisser flotter une citation bouclée gauche mais avoir quelques problèmes

Question

J'essaye de faire flotter une grande citation bouclée gauche de sorte que le blockquote se trouve juste à la gauche de lui. J'ai quelques problèmes cependant.

1) Le texte dans la balise p continue à entourer le symbole de citation même si je déclare clear: right; sur la blockquote. Je n'ai jamais compris comment les flotteurs sont supposés fonctionner, alors quelqu'un peut-il nous donner des suggestions sur la façon de faire fonctionner ça? 2) Sans tenir compte du problème ci-dessus, le texte à l'intérieur ne s'aligne pas avec le haut du symbole de citation mais quand j'applique margin-top au blockquote, il ne bouge pas du tout. Suggestions?

Je sais que je pourrais résoudre ceci en utilisant une image d'arrière-plan d'un symbole de citation sur le blockquote mais j'aimerais le faire avec le texte.

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

En supposant que vous voulez que le texte de la citation soit placé juste à la droite du symbole de citation bouclé. Qu'en est-il changer votre balisage pour:

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

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

Et votre CSS:

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

Ou quelque chose de similaire?

Answer 2

En ce qui concerne 1), vous devez régler clear:right p plutôt que sur blockquote. En ce qui concerne 2), essayez d'utiliser padding-top:0 plutôt que margin-top:0.