it-swarm.it

Come inserire il testo nell'angolo in alto a destra o in basso a destra di una "scatola" usando css

Come faccio a ottenere here e and here sulla destra, sulla stessa riga del lorem ipsum? Vedi il seguente:

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>

Ti avvicina molto, anche se potresti aver bisogno di modificare i valori "top" e "bottom".

29
Garry Shutler

Metti a virgola mobile il testo che desideri visualizzare a destra e nel markup assicurati che questo testo e lo span circostante avvengano prima del testo che dovrebbe essere sulla sinistra. Se non si verifica prima, potresti avere problemi con il testo flottato che appare su una linea 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>

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

3
phloopy

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

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 di cui sopra.

 # lipsum {posizione: assoluta; in alto: 0; sinistra: 0;}/* esempio */
 # qui {posizione: assoluta; in alto: 0; destra: 0;} 
 # andhere {position: absolute; bottom: 0; right: 0;}

Di nuovo, il precedente funziona solo (in modo affidabile) se #lipsum è posizionato tramite assoluto.

In caso contrario, sarà necessario utilizzare la proprietà float.

 # here, #andhere {float: right;}

Avrai anche bisogno di mettere il tuo markup nel posto appropriato. Per una presentazione migliore, le tue due div probabilmente avranno bisogno di padding e margini in modo che il testo non funzioni insieme.

1
BrewinBombers

La prima riga consisterebbe in 3 <div>s. Uno esterno che contiene due <div>s interni. Il primo <div> interno avrebbe float:left che dovrebbe assicurarsi che rimanga a sinistra, il secondo avrebbe 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 è l'idea migliore - ma hai capito il punto.

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

5 funzionerebbe come 1.

0
user1151

Devi inserire "qui" in un <div> o <span> con style="float: right".

0
AdamB

Potresti essere in grado di utilizzare il posizionamento assoluto.

La casella del 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.

Dovrai sperimentare con padding per impedire che i contenuti principali della scatola vengano eseguiti al di sotto degli elementi posizionati in modo assoluto, poiché esistono al di fuori del normale flusso dei contenuti del testo.

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

Hai solo bisogno di far fluttuare l'elemento div a destra e dargli un margine. Assicurati di non usare "assoluto" per questo caso.

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

O ancora meglio, usa 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>

Spostare il em a destra (con display: block), o impostarlo su position: absolute con il relativo genitore come position: relative.

0
Bruce