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

  • Disney Pets and Animals

    Disney Pets

    29 ŞUBAT 2012
  • GUN-TIME with Brandon

    GUN-TIME wit

    3 ŞUBAT 2009
  • Videogamerz | Call of Duty

    Videogamerz

    5 NİSAN 2012