Dikey hizalama kayan divs | Netgez.com
SORU
20 HAZÄ°RAN 2009, CUMARTESÄ°


Dikey hizalama kayan divs

Farklı yazı tipi boyutları ile iki salak yüzer çalışıyorum. Aynı temel üzerinde metni hizalamak için bir yol bulamıyorum. Çalışıyorum:

<div id="header">
    <div id="left" style="float:left; font-size:40px;">BIG</div>
    <div id="right" style="float:right;">SMALL</div>
</div>

CEVAP
20 HAZÄ°RAN 2009, CUMARTESÄ°


Tamam, öncelikle saf CSS yolu. Dikey hizalama altında böyle relative absolute positioning kullanarak alabilirsiniz:

<div id="header">
  <div id="left">BIG</div>
  <div id="right">SMALL</div>
</div>
<style type="text/css">
html, body { margin: 0; padding: 0; }
#header { position: relative; height: 60px; }
#left { font-size: 40px; position: absolute; left: 0; bottom: 0; }
#right { position: absolute; right: 0; bottom: 0; }
</style>

Bu konuda, z-index sorunları menüleri (geçen sefer denedim bu benim menüler ortaya çıktı . gibi şeyler ile IE6 davranış gibi gibi olabilir ^strong>altındaiçeriğin mutlak).

Ayrıca, tüm öğeleri konumlandırılmış olması gerekir olsun veya olmasın bağlı olarak, bir şeyleri yapmak için genellikle istenmeyen bir durum içeren eleman açıkça, yükseklik belirterek başlamak gerekebilir. İdeal olarak, konteyner otomatik boyutu çocuklar için almak istiyorum.

Sorun farklı boyutta yazı tipi taban eşleşme olmaz ve "" CSS bunu yapmanın yolu da. saf bilmiyorum.

Ancak tablolar ile çözümönemsiz:

<table id="header">
<tr>
  <td id="left">BIG</td>
  <td id="right">SMALL</td>
</tr>
</table>
<style type="text/css">
#header { width: 100%; }
#header td { vertical-align: baseline; }
#left { font-size: 40px; }
#right { text-align: right; }
</style>

Deneyin ve mükemmel bir şekilde çalıştığını göreceksiniz.

Anti-masa kalabalık mavi cinayet çığlık olacak ama yukarıdaki en basit, çoğu tarayıcı ile uyumlu bir şekilde özellikle eğer IE6 desteği (gerekiyorsa) bu işi.

Oh ve her zaman CSS stilleri satır içi sınıfları kullanmayı tercih.

Bunu PaylaÅŸ:
  • Google+
  • E-Posta
Etiketler:
Css

YORUMLAR

SPONSOR VÄ°DEO

Rastgele Yazarlar

  • Electro Posé

    Electro PosÃ

    21 ÅžUBAT 2013
  • FUNKER530 - Veteran Community & Combat Footage

    FUNKER530 -

    25 Ocak 2007
  • The Pet Collective

    The Pet Coll

    5 Ocak 2012