Дивы. Выравнивание по нижнему краю

Юзер · September 23, 2008

http://www.htmlbook.ru/content/?id=87 - тут написано о том, как такое делается с помощью табличной верстки.

А вот как дивами такого достичь - не знаю.

Есть родительский див. В него помещаются 4 дива горизонтально. Содержимое каждого из 4-х дивов разное и поэтому они получаются разной высоты. И каждый див "липнет" к родительскому сверху. А я хочу, чтобы он "прилипал" снизу.

Как такое сделать?

Victor Ananiev · September 23, 2008

для дивов, position absolute; margin-bottom:0;

Vlad · September 23, 2008

Можно через сочетание relative - absolute, задаваемое для каждого дива.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>дивы</title>
<style type="text/css">
#layer1 {
  background: #fc0;
  position: relative;
  height: 500px;
}

#layer2 {
  background: #f0f0f0;
  position: absolute;
  left: 0;
  bottom: 0;
}
</style>
</head>
<body>
<div id="layer1">
<h1>История Белоснежки</h1>
<p>Чтобы опробовать новую многоплановую камеру
 в действии, Дисней поставил экспериментальную короткометражку 
под названием «Старая мельница». Несмотря на некоторую простоту 
сюжета, работа получила премию «Оскар» как лучший короткометражный 
мультфильм 1937 года.</p>
<div id="layer2">
<h2>Интересные факты</h2>
<p>Для одного из гномов Дисней никак не мог подобрать подходящий голос, 
и в итоге сделал персонажа бессловесным.</p>
</div>
</div>
</body>
</html>

hmelii · October 10, 2008

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>дивы</title>
<style type="text/css">
div.in{display:inline-block; vertical-align:bottom; width:23%; border:1px solid red;}
/*IE6*/* html div.in{display:inline;}
/*IE7*/* + html div.in{display:inline;}
</style>
</head>
<body>
<div style="border:1px solid red;">
<div class="in"><p>див1</p></div>
<div class="in"><p>див2</p><p>див2</p></div>
<div class="in"><p>див2</p><p>див2</p><p>див2</p></div>
<div class="in"><p>див2</p><p>див2</p><p>див2</p><p>див2</p></div>
</div>

</body>
</html>

Посетить мою домашнюю страницу

Sign In

Дивы. Выравнивание по нижнему краю

Question

Юзер

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Victor Ananiev

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

hmelii

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information