Vous avez besoin de flotter à la fois les éléments et clair.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="border: 1px solid red; width: 100px;">
<a href="#" style="border-color: blue; float: right;">bar</a>
<a href="#" style="float:left;">foo</a>
<div style="clear:both;"></div>
</div>
something
</body>
</html>
Ou tout simplement mettre de l'élément flottant en face de l'élément normal, comme ceci:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="border: 1px solid red; width: 100px;">
<a href="#" style="border-color: blue; float: right;">bar</a>
<a href="#">foo</a>
</div>
something
</body>
</html>
Brève Explication:
Pardon pour mon anglais et le dessin, mais voici brièvement comment flotteur et de la compensation des œuvres de la croix-navigateur:
Un élément peut être flottait à gauche ou à droite. Lorsque vous avez de l'élément flottant, l'élément ne pousse pas "normal" de contenu vers le bas. Voir pourquoi -
Float et clear:
![alt text]()
Légende: Orange/Float Droit, Bleu/Float à Gauche, des traits Gris Clair/diviseur, Rouge Rect/de limites
Dans ce cas, vous avez 2 éléments d'une ligne de texte - un float à gauche, et l'autre flotteur droit. Quand flottante, il ne poussera pas le contenu vers le bas aka prendre l'espace. Ainsi, si vous n'utilisez pas d' clear:both à la grise lignes, le contenu ci-dessous de la pile vers le haut entre les 2 éléments flottants et peut donc ne pas être ce que vous voulez.
Lorsque vous utilisez clear:both - dessous de la flotte, le contenu en dessous de la flotte sera poussé aussi loin que selon le flotteur élément est de plus en hauteur. Ceci est illustré dans le diagramme de la 2e et de la 3e section.
Flotteur seulement:
![alt text]()
Légende: Orange/Float Droit, Bleu/contenu Normal, les Lignes Grises/la ligne qui est divded avec le prochain, Rouge Rect/de limites
Le bleu normal le contenu est déjà par défaut text-align: left;. Il est donc orientées à gauche. Vous avez besoin de le détacher pour être en face de la teneur normale parce que vous avez dit au navigateur de flotter à partir de cette ligne.
Vous devriez expérimenter différentes conditions pour voir son effet: la mise flotter devant, derrière, le flotteur gauche à droite, en clair les deux, clairement à droite et à gauche.
