it-swarm-tr.com

Metin "css" kullanarak sağ üst veya sağ alt köşesine nasıl yerleştirilir

here ve and here öğelerinin sağda, lorem ipsumlarıyla aynı satırlarda olmasını nasıl sağlarım? Aşağıdakilere bakın:

Lorem Ipsum etc........here  
blah.......................  
blah blah..................  
blah.......................  
lorem ipsums.......and here
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>

"Üst" ve "alt" değerleri ayarlamaya gerek duymanıza rağmen oldukça yakın olmanızı sağlar.

29
Garry Shutler

Sağda görünmesini istediğiniz metni sağa kaydırın ve işaretlemede, bu metnin ve çevresindeki açıklığın solda olması gereken metnin önüne geldiğinden emin olun. Önce gerçekleşmezse, farklı bir satırda görünen kayan metinle ilgili sorunlarınız olabilir.

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

Bunun yalnızca üst ve alt köşeler için değil, herhangi bir satır için çalıştığını unutmayın.

3
phloopy

Lorum Ipsum'u içeren öğenin konumu mutlak olarak ayarlanmışsa, konumu CSS aracılığıyla belirleyebilirsiniz. "Burada" ve "ve burada" elementlerin blok seviyeli bir elementte bulunması gerekir. Bunun gibi bir işaretleme kullanacağım.

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

İşte yukarıdaki için CSS.

 # lipsum {position: mutlak; üst: 0; sol: 0;}/* örnek */
 # burada {konum: mutlak; üst: 0; sağ: 0;} 
 # andhere {position: mutlak; alt: 0; sağ: 0;} 

Yine, yukarıdakiler yalnızca #lipsum mutlak olarak konumlandırılmışsa (güvenilir) çalışır.

Değilse, float özelliğini kullanmanız gerekir.

 # burada, #vehere {float: right;} 

İşaretlemenizi uygun bir yere koymanız da gerekir. Daha iyi sunum için, iki divs'nizin bir miktar dolguyu ve kenar boşluğunu kullanması gerekecek, böylece metnin hepsi birlikte çalışmasın.

1
BrewinBombers

İlk satır 3 <div>s olacaktır. İki iç <div>s içeren bir dış. İlk iç <div>, sola kalacağından emin olacak float:left 'ya, sağa yapışacak olan float:right' ya sahip olacaktır.

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

... açıkçası, satır içi stil en iyi fikir değil - ama siz bunu anlıyorsunuz.

2,3 ve 4 tekil <div>s olacaktır.

5 1 gibi çalışır.

0
user1151

"Burada" bir <div> veya <span> ile style="float: right" içine koymak gerekir.

0
AdamB

Mutlak konumlandırma kullanabilirsiniz.

Konteyner kutusu position: relative olarak ayarlanmalıdır.

Sağ üstteki metin position: absolute; top: 0; right: 0 olarak ayarlanmalıdır. Sağ alt metin, position: absolute; bottom: 0; right: 0 olarak ayarlanmalıdır.

Kutunun ana içeriğinin, metin içeriğinin normal akışı dışında olduğu gibi, mutlak konumlandırılmış öğelerin altında çalışmasını durdurmak için padding ile deneme yapmanız gerekir.

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

Sadece div elemanını sağa doğru çekip bir kenar boşluğu bırakmanız yeterlidir. Bu durumda "mutlak" kullanmadığınızdan emin olun.

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

Ya da daha iyisi, ihtiyacınıza uygun HTML öğelerini kullanın. Daha temiz ve daha yalın işaretler üretiyor. Örnek:

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

em öğesini sağa kaydırın (display: block ile) veya ebeveynini position: absolute olarak ayarlayarak position: relative olarak ayarlayın.

0
Bruce