Dikey hizalama kayan divs

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