web-dev-qa-db-fra.com

Act to the text in the right

Comment pourrais-je obtenir les here et and here à droite, sur les mêmes lignes que les lorem ipsums? Voir ce qui suit:

Lorem Ipsum etc........here  
blah.......................  
blah blah..................  
blah.......................  
lorem ipsums.......and here
csslayout
13
Corey Trager

<div style="position: relative; width: 250px;">
  <div style="position: absolute; top: 0; right: 0; width: 100px; text-align:right;">
    here
  </div>
  <div style="position: absolute; bottom: 0; right: 0; width: 100px; text-align:right;">
    and here
  </div>
  Lorem Ipsum etc <br />
  blah <br />
  blah blah <br />
  blah <br />
  lorem ipsums
</div>

Vous permet de vous rapprocher, bien que vous deviez peut-être modifier les valeurs "supérieure" et "inférieure".

29
Garry Shutler

Flottez à droite le texte que vous souhaitez voir apparaître à droite et, dans le balisage, assurez-vous que ce texte et son étendue environnante apparaissent avant le texte devant figurer à gauche. Si cela ne se produit pas en premier, vous pouvez avoir des problèmes avec le texte flottant apparaissant sur une autre ligne.

<html>
  <body>
    <div>
      <span style="float:right">here</span>Lorem Ipsum etc<br/>
      blah<br/>
      blah blah<br/>
      blah<br/>
      <span style="float:right">and here</span>lorem ipsums<br/>
    </div>
  </body>
</html>

Notez que cela fonctionne pour n'importe quelle ligne, pas seulement les coins supérieur et inférieur.

3
phloopy

Si la position de l'élément contenant le Lorum Ipsum est définie comme absolue, vous pouvez spécifier la position via CSS. Les éléments "ici" et "et ici" devraient être contenus dans un élément de niveau bloc. Je vais utiliser un balisage comme ça.

print("<div id="lipsum">");
print("<div id="here">");
print("  here");
print("</div>");
print("<div id="andhere">");
print("and here");
print("</div>");
print("blah");
print("</div>");

Voici le CSS pour ci-dessus.

 # lipsum {position: absolute; haut: 0; gauche: 0;}/* exemple */
 # ici {position: absolue; top: 0; droite: 0;} 
 # andhere {position : absolu; bas: 0; droit: 0;}

De nouveau, ce qui précède ne fonctionne (de manière fiable) que si #lipsum est positionné via absolute.

Sinon, vous devrez utiliser la propriété float.

 # ici, #andhere {float: right;}

Vous aurez également besoin de mettre votre balisage à l'endroit approprié. Pour une meilleure présentation, vos deux divs auront probablement besoin de marges et de marges afin que le texte ne soit pas lu ensemble.

1
BrewinBombers

La première ligne serait composée de 3 <div>s. Un extérieur qui contient deux <div>s internes. Le premier <div> interne aurait float:left qui ferait en sorte qu'il reste à gauche, le second aurait float:right, ce qui le collerait à droite.

<div style="width:500;height:50"><br>
<div style="float:left" >stuff </div><br>
<div style="float:right" >stuff </div>

... évidemment, le style en ligne n'est pas la meilleure idée - mais vous comprenez le point.

2,3 et 4 seraient des <div>s simples.

5 fonctionnerait comme 1.

0
user1151

Vous devez mettre "ici" dans un <div> ou <span> avec style="float: right".

0
AdamB

Vous pourrez peut-être utiliser le positionnement absolu.

La boîte de conteneur doit être définie sur position: relative.

Le texte en haut à droite doit être défini sur position: absolute; top: 0; right: 0. Le texte en bas à droite doit être défini sur position: absolute; bottom: 0; right: 0.

Vous devrez faire l'essai de padding pour empêcher le contenu principal de la boîte de s'exécuter sous les éléments positionnés en absolu, car ils existent en dehors du flux normal du contenu du texte.

0
ceejayoz
<style>
  #content { width: 300px; height: 300px; border: 1px solid black; position: relative; }
  .topright { position: absolute; top: 5px; right: 5px; text-align: right; }
  .bottomright { position: absolute; bottom: 5px; right: 5px; text-align: right; }
</style>
<div id="content">
  <div class="topright">here</div>
  <div class="bottomright">and here</div>
  Lorem ipsum etc................
</div>
0
Loren Segal

Il vous suffit de faire flotter l'élément div à droite et de lui laisser une marge. Assurez-vous de ne pas utiliser "absolu" dans ce cas.

#date {
  margin-right:5px;
  position:relative;
  float:right;
}
0
trillions

Ou mieux encore, utilisez des éléments HTML qui répondent à vos besoins. C'est plus propre, et produit un balisage plus maigre. Exemple:

<dl>
   <dt>Lorem Ipsum etc <em>here</em></dt>
   <dd>blah</dd>
   <dd>blah blah</dd>
   <dd>blah</dd>
   <dt>lorem ipsums <em>and here</em></dt>
</dl>

Flottez la em à droite (avec display: block) ou définissez-la sur position: absolute avec son parent comme position: relative.

0
Bruce