Comment mettre du texte dans le coin supérieur droit ou inférieur droit d'une "boîte" à l'aide de css

StackOverflow https://stackoverflow.com/questions/65536

  •  09-06-2019
  •  | 
  •  

Question

Comment pourrais-je obtenir le ici et le et ici à 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
Était-ce utile?

La solution 

<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 ayez peut-être besoin de modifier le " top " et " bas " valeurs.

Autres conseils

Faites défiler à droite le texte que vous souhaitez voir apparaître à droite et, dans le balisage, assurez-vous que ce texte et sa plage environnante apparaissent avant le texte devant figurer à gauche. Si cela ne se produit pas en premier, vous pourriez avoir des problèmes avec le texte flottant qui apparaît 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 toutes les lignes, pas seulement les coins supérieur et inférieur.

Si la position de l'élément contenant le Lorum Ipsum est définie en absolu, vous pouvez spécifier la position via CSS. Le " ici " et " et " les éléments doivent être contenus dans un élément de niveau bloc. Je vais utiliser un balisage comme ceci. 

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 code CSS ci-dessus. 

#lipsum {position:absolute;top:0;left:0;} /* example */
#here {position:absolute;top:0;right:0;}
#andhere {position:absolute;bottom:0;right:0;}

Encore une fois, ce qui précède ne fonctionne (de manière fiable) que si #lipsum est positionné via absolu.

Si ce n'est pas le cas, vous devrez utiliser la propriété float. 

#here, #andhere {float:right;}

Vous devrez également placer votre balisage au bon endroit. 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. 

<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>

Ou encore mieux, 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>

Faites flotter le em à droite (avec display: block ) ou réglez-le sur position: absolute avec son parent comme position: relative .

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

La première ligne serait composée de 3 < div > s. Un périphérique externe contenant deux < div > s internes. Le premier < div > interne aurait float: left ce qui garantirait 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 obtenez le point.

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

5 fonctionnerait comme 1.

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; en haut: 0; à droite: 0 . Le texte en bas à droite doit être défini sur position: absolute; en bas: 0; à droite: 0 .

Vous devrez expérimenter avec 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.

Il vous suffit de faire flotter l'élément div vers la droite et de lui laisser une marge. Assurez-vous de ne pas utiliser " absolute " pour ce cas. 

#date {
  margin-right:5px;
  position:relative;
  float:right;
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top