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.
Bunu Paylaş:
Nasıl div içeriğini daha büyük değil y...
Nasıl bir dosyanın içeriğini bir Java ...
Nasıl dikey olarak div içine bir resim...
Nasıl ekranın alt kısmında görüş hizal...
Bir hizalamak için nasıl <sayfanın ...