Come inserire il testo nell'angolo in alto a destra o in basso a destra di una "scatola" utilizzando i CSS

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

  •  09-06-2019
  •  | 
  •  

Domanda

Come potrei ottenere il here E and here essere di destra, sulla stessa linea del lorem ipsums?Vedi quanto segue:

Lorem Ipsum etc........here  
blah.......................  
blah blah..................  
blah.......................  
lorem ipsums.......and here
È stato utile?

Soluzione 

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

Ti avvicina abbastanza, anche se potrebbe essere necessario modificare i valori "superiore" e "inferiore".

Altri suggerimenti

Sposta a destra il testo che vuoi che appaia a destra e nel markup assicurati che questo testo e l'intervallo circostante si trovino prima del testo che dovrebbe essere a sinistra.Se non si verifica prima, potresti avere problemi con il testo flottato che appare su una riga diversa.

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

Tieni presente che questo funziona per qualsiasi linea, non solo per gli angoli superiore e inferiore.

Se la posizione dell'elemento contenente il Lorum Ipsum è assoluta, è possibile specificare la posizione tramite CSS.Gli elementi "qui" e "e qui" dovrebbero essere contenuti in un elemento a livello di blocco.Utilizzerò il markup in questo modo.

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>");

Ecco il CSS per sopra.

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

Ancora una volta, quanto sopra funziona (in modo affidabile) solo se #lipsum è posizionato tramite assoluto.

In caso contrario, dovrai utilizzare la proprietà float.

#here, #andhere {float:right;}

Dovrai anche inserire il markup nel posto appropriato.Per una migliore presentazione, i tuoi due div avranno probabilmente bisogno di imbottitura e margini in modo che il testo non funzioni tutto insieme.

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

O ancora meglio, utilizza gli elementi HTML adatti alle tue esigenze.È più pulito e produce un markup più snello.Esempio:

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

Fai galleggiare il em a destra (con display: block) o impostarlo su position: absolute con il suo genitore come position: relative.

Devi mettere "qui" in a <div> O <span> con style="float: right".

La prima riga sarebbe composta da 3 <div>S.Uno esterno che contiene due interni <div>S.Il primo interiore <div> avrebbe float:left che garantirebbe che rimanga a sinistra, il secondo lo avrebbe fatto float:right, che lo incollerebbe a destra.

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

...ovviamente lo stile in linea non è la migliore idea, ma hai capito il punto.

2,3 e 4 sarebbero singoli <div>S.

5 funzionerebbe come 1.

Potresti essere in grado di utilizzare il posizionamento assoluto.

La casella contenitore deve essere impostata su position: relative.

Il testo in alto a destra dovrebbe essere impostato su position: absolute; top: 0; right: 0.Il testo in basso a destra dovrebbe essere impostato su position: absolute; bottom: 0; right: 0.

Avrai bisogno di sperimentare padding per impedire che il contenuto principale della casella scorra sotto gli elementi posizionati assoluti, poiché esistono al di fuori del normale flusso dei contenuti del testo.

Devi solo spostare l'elemento div a destra e dargli un margine.Assicurati di non utilizzare "assoluto" per questo caso.

#date {
  margin-right:5px;
  position:relative;
  float:right;
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top