Jak umieścić tekst w prawym górnym rogu lub prawym dolnym rogu "pudełka" za pomocą css

Question

Jak uzyskać po here i and here po prawej stronie, na tych samych liniach, co lorem ipsums? Zobacz:

Lorem Ipsum etc........here 
blah....................... 
blah blah.................. 
blah....................... 
lorem ipsums.......and here 

Answer 1

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

Pobiera bardzo blisko, choć być może trzeba dostosować "top" i "dół" wartości.

Answer 2

Pierwsza linia że składa się z 3 <div> s. Jedna strona zewnętrzna zawierająca dwa wewnętrzne elementy. Pierwsza wewnętrzna kamera ma mieć wartość float:left, która zapewni, że pozostanie w lewo, a druga będzie miała float:right, która będzie przyklejać ją w prawo.

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

... oczywiście styl inline nie jest najlepszym pomysłem - ale masz rację.

2,3, a 4 byłoby pojedyncze <div> s.

5 zadziała jak 1.

Answer 3

trzeba umieścić "tutaj" w <div> lub <span> z style="float: right".

Answer 4

Być może będziesz w stanie użyć pozycjonowania absolutnego.

Pojemnik na pojemnik powinien być ustawiony na position: relative.

Tekst w prawym górnym rogu powinien być ustawiony na position: absolute; top: 0; right: 0. Tekst w prawym dolnym rogu powinien być ustawiony na position: absolute; bottom: 0; right: 0.

Będziesz musiał poeksperymentować z padding, aby zatrzymać główną zawartość pola pod pozycjami pozycjonowanymi absolutnie, ponieważ istnieją one poza normalnym przepływem zawartości tekstowej.

Answer 5

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

Answer 6

Jeśli pozycja elementu zawierającego Lorum Ipsum jest ustawiona na bezwzględną, można określić pozycję za pomocą CSS. Elementy "tutaj" i "i tutaj" musiałyby być zawarte w elemencie blokowym. Użyję takiego znacznika.

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

Oto CSS dla wyżej.

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

Ponownie, powyższe działa tylko (niezawodnie) jeżeli #lipsum jest umieszczony za absolutne.

Jeśli nie, musisz użyć właściwości float.

 
#here, #andhere {float:right;} 

Będziesz także musiał umieścić swój znacznik we właściwym miejscu. W celu lepszej prezentacji, twoi dwaj divy będą prawdopodobnie potrzebować trochę dopełnienia i marginesów, aby tekst nie działał razem.

Answer 7

A nawet lepiej, użyj elementów HTML, które pasują do Twoich potrzeb. Jest czystszy i zapewnia mniejsze oznaczenia.Przykład:

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

pływak em w prawo (z display: block) lub ustawić go na position: absolute z nadrzędnego jako position: relative.

Answer 8

Przeprowadź w prawo tekst, który ma się pojawić po prawej stronie, a w znaczniku upewnij się, że ten tekst i otaczające go spacje występują przed tekstem, który powinien znajdować się po lewej stronie. Jeśli nie pojawi się pierwszy, możesz mieć problemy z płynnym tekstem pojawiającym się w innym wierszu.

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

Należy zauważyć, że działa to dla dowolnej linii, a nie tylko górnego i dolnego narożnika.

Answer 9

Wystarczy unieść element div w prawo i nadać mu margines. Upewnij się, że w tym przypadku nie używaj "absolutnego".

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