Texte à gauche et à droite de l'élément

Question

En utilisant CSS, quel est le meilleur moyen d'avoir du texte sur le côté droit et le côté gauche d'un élément et d'être au même endroit verticalement?

Ainsi se termine avec la mise en page suivante:

Le conteneur a une largeur fixe, donc je ne veux pas utiliser le positionnement, parce que je sais que je n'ai pas.

Answer 1

(1) Ajouter deux divs dans l'élément contenant chaque chaîne de texte

<div> 
    <div class="div1">Left Text</div> 
    <div class="div2">Right Text</div> 
</div> 

(2) Float les deux divs à côté de l'autre

.div1 { 
    float: left; 
} 

.div2 { 
    float:right; 
} 

(3) Définissez les propriétés text-align pour le droit div (cela fera en sorte que le texte soit poussé vers la droite comme dans votre exemple).

.div2 { 
    float:right; 
    text-align: right; 
} 

Answer 2

Vous pouvez placer vos deux articles dans le même conteneur et les faire flotter dans la bonne position.

Vous pourriez avoir quelque chose comme:

<div class="container"> 
    <div class="item1">Item 1</div> 
    <div class="item2">Item 2</div> 
</div> 

et CSS:

.container{width:500px;} 

.item1, item2{width:200px;} 
.item1{float:left;} 
.item2{float:right;} 

Exemple: http://jsfiddle.net/7Wvhj/1/