Comment avoir du texte centré et du texte flottant à droite sur la même ligne, alors que tout a des largeurs dynamiques ?

Question

J'ai un bloc de texte de taille variable, que je voudrais centrer dans un div. La largeur du div est un % de son élément parent, et la hauteur est définie par le padding, quelle que soit la hauteur du texte centré. Ceci est facilement réalisable via :

<div style="width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
</div>

Cela fonctionne bien.

Mais quand j'essaie d'ajouter la partie sur la droite :

<div style="width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
    <div style="float: right;">ASDF!</div>
</div>

alors il compte la largeur du texte de droite vers la largeur totale du texte, et met le "ASDF !" à droite, mais met le "Lorem ipsum..." plus à gauche qu'il ne devrait l'être (comme si la longueur totale de lorem... incluait le asdf !).

Voici une maquette de ce que j'essaie d'obtenir :

Je pense que ce serait assez facile avec flexbox, mais je veux éviter d'utiliser quoi que ce soit de récent car je dois prendre en charge les anciens navigateurs.

Cette question semble pertinente, mais (corrigez-moi si je me trompe) elle semble nécessiter des largeurs connues.

Comment dois-je m'y prendre ?

Answer 1

Essayez ça :

<div class='content' style="width: 50%; padding: 15px; text-align: center; position: relative">
    <div class="noDown" style="position: absolute; right: 0;">ASDF!</div>
    Lorem ipsum...
</div>​

Test de JsFiddle : http://jsfiddle.net/3Y7ty/2/

Answer 2

IE8+ est assez vieux ?

Construire sur votre violon vous pouvez obtenir ce que vous voulez dans IE8+. Notez que le wrapper #b doit avoir le box-sizing pour l'amener à width: 50% y compris padding . Ensuite, pour votre élément flottant, ajoutez simplement ceci :

margin: 0 -15px 0 -100%;

En -15px les bons comptes de marge pour votre 15px de rembourrage droit pour tirer l'élément complètement vers la droite, et ensuite le -100% marge de gauche fait que le texte précédent est entièrement centré.

Ou besoin d'un soutien pour IE7 ?

Vous mentionnez la nécessité de prendre en charge des "navigateurs plus anciens", mais vous ne donnez aucune information sur la manière dont vous tenez (IE8 est "ancien" maintenant, mais peut-être faites-vous référence à des navigateurs encore plus anciens). Si vous avez besoin de la prise en charge d'IE7 (ou d'une version inférieure ?), vous devrez alors cibler conditionnellement IE7 et utilisez plutôt ceci :

margin: -1.2em -15px 0 0;

IE7 ne reconnaît pas le float: right de la même manière que les navigateurs ultérieurs, et il le placera "sous" le texte précédent, et le -100% marge gauche ramènera l'élément flottant vers la gauche. Cette marge disparaît donc, et pour aligner le texte sur le texte précédent, nous lui attribuons une marge supérieure négative qui doit être égale à la marge de gauche de l'élément flottant. line-height de la police utilisée (qui sera généralement 1.2 o 1.1 ; vous voudrez peut-être le définir explicitement dans le cadre de l'option #b ). Je n'ai pas testé pour voir si cela fonctionne dans IE6.

Answer 3

Est-ce que c'est bon pour vous ? http://jsfiddle.net/3Y7ty/

.container {
    width:100%;
    overflow:hidden;
    position:relative;
}
.center {
    width:50%;
    padding:15px;
    margin:0 auto;
    background:#ccc;
}

.right {
    display:inline-block;
    padding:15px;
    background:#999;
    position:absolute;
    right:0;
    top:0;
}

<div class="container">

 <div class="center">
     Lorem ipsum...
 </div>

 <div class="right">
     ASDF!
 </div>

</div>

Answer 4

J'ai ajouté ce violon. http://jsfiddle.net/nQvEW/68/ Regarde ça.

J'ai positionné l'élément principal de façon absolue, tandis que l'un des éléments enfants est relatif au parent et l'autre est absolu. Les attributs top et left peuvent être ajustés en fonction de vos besoins. Mais j'ai codé en dur ce qui suit pour l'élément div principal. Vous pouvez ajouter ceci en tant qu'élément CSS .

position:absolute;
width:500px;
height:40px;
background-color:#F00;

Answer 5

Vous pouvez essayer :

    <div style="width:50%; padding: 15px; text-align: center; ">
Lorem ipsum...<div style=" display:inline; float:right;">ASDF!</div>
</div>

Ça a marché dans une maquette rapide que je viens de faire.