éléments flottais écarts entre, mais pas de remplissage explicite/marge

j'ai le balisage ci-dessous qui ne peut pas être changé:éléments flottais écarts entre, mais pas de remplissage explicite/marge

<div>Some data</div> 
<span>More data</span> 
<a>Link 1</a> 
<a>Link 2</a>

Je veux qu'il apparaisse rendu de sorte que la div est tout le chemin vers la gauche et la durée est tout le chemin vers la droite tandis que les liens 1 et 2 sont à droite de la portée.

Signification:

|<div>     <span><a1><a2>|

Où | 's indiquent le bord du contenant div.

Je peux obtenir le dessous avec float à gauche sur la div et flotter à droite sur les autres éléments mais vous pouvez voir que ce n'est pas exactement ce que je veux. Etant donné que les données de l'étendue ne seront pas toujours de la même taille, une marge/marge fixe ne fonctionnera pas.

Merci d'avance pour toute suggestion.

Source

2009-10-28 tgandrews

Cela semble assez proche:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<style type="text/css"> 
html, body, div { margin: 0; padding: 0; } 
#outer { margin: 0 auto; width: 600px; background: yellow; overflow: hidden; text-align: right; } 
#outer div { float: left; } 
</style> 
</head> 
<body> 
<div id="outer"> 
<div>Some data</div> 
<span>More data</span> 
<a>Link 1</a> 
<a>Link 2</a> 
</div> 
</body> 
</html>

L'élément contenant est un élément de niveau bloc et donc aussi large que doit être. Réglez l'alignement du texte sur la droite et les éléments en ligne vont vers la droite dans le bon ordre. Un flotteur à gauche sur le premier div le garde sur la gauche.

Source

2009-10-28 15:20:53 cletus

éléments flottais écarts entre, mais pas de remplissage explicite/marge

Répondre

Questions connexes