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

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