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
<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".
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.
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.
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.
Devi inserire "qui" in un <div>
o <span>
con style="float: right"
.
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.
<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>
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;
}
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
.