SORU
25 ŞUBAT 2009, ÇARŞAMBA


Nasıl css ile altına bir div içeriğini hizalamak için?

Demek aşağıdaki CSS ve HTML kodu var:

#header {
  height: 150px;
}
<body>
  <div id="header">
    <h1>Header title</h1>
    header content (one or multiple lines)
  </div>
  <div id="content">
    bla bla bla
  </div>
</body>

Başlık bölümü sabit yükseklik ama başlık içeriği değişebilir. Dikey başlık bölümünün alt tarafına olmak için başlık içeriği, metnin son satırı "sopa" başlık bölümünün altında.

Eğer tek satırlık bir metin varsa gibi olur:

-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

bla bla bla

Ve eğer üç satır olsaydı

-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

bla bla bla

Nasıl bu CSS ile yapılabilir mi?

CEVAP
25 ŞUBAT 2009, ÇARŞAMBA


Göreli mutlak konumlandırma en iyi bahis

  #header {
    position: relative;
    min-height: 150px;
  }
  #header-content {
    position: absolute;
    bottom: 0;
    left: 0;
  }
<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>

Ama bununla ilgili sorunlar içine çalıştırabilirsiniz. Ben denedim ne zaman açılır menüler içeriği aşağıda görünen ile ilgili sorunlar vardı. Sadece güzel değil.

Dürüst olmak gerekirse, dikey ortalama sorunları ve öğeleri ile uyum sorunları sabit değil herhangi bir dikey yükseklik için daha kolay.

Örnek: Can you do this HTML layout without using tables?

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • InsideBlackBerry

    InsideBlackB

    14 Aralık 2009
  • RaverX DouBle StAg XI

    RaverX DouBl

    23 Mayıs 2008
  • TROPFEST

    TROPFEST

    27 Mart 2007