Форум Сайтостроение Веб-строительство

Выравнивание текста в div по нижней границе

B
На сайте с 14.07.2006
Offline
71
blagoy
17042

Сверстал кусок сайта с минимальным использованием кода, не получается выровнять текст в dive по нижнему краю. Помогите сделать :( 

<html>

<head>

<style type="text/css">

<!--

.vazhno {position: relative;

clear: both;

display:inline-block;

margin: -5px 0 5px -5px;}



.vazhno div {position: relative;

float: left;

width: 250px;

height: 190px;

margin: 5px 0 0 5px;

vertical-align:bottom;}



.vazhno div h2 {font-size:18px; line-height:23px; padding:3px;}

.vazhno div h2 a:visited,

.vazhno div h2 a:link {background: #003366;  color:#CDD7FC; text-decoration:none; padding:0 3px;}

.vazhno div h2 a:hover {background: #3399FF; color:#CDD7FC; text-decoration:none; padding:0 3px;}

-->

</style>

</head>



<body>

<div class="vazhno">

        <div style="background-image: url(http://img-fotki.yandex.ru/get/7/blagoy1.0/0_6b4c_8d820f71_L);"><h2><a href="/">Павел Румянцев*— седьмой «международник»</a></h2></div>

        

        <div style="background-image: url(http://img-fotki.yandex.ru/get/7/blagoy1.0/0_6b4c_8d820f71_L);"><h2><a href="/">Павел Румянцев*— седьмой «международник»</a></h2></div>

</div>

</body>

</html>
Varkolak
На сайте с 03.06.2005
Offline
174
Varkolak
#1

дивы не поддерживают вертикальное выравнивание

html/css/js верстка и разработка сайтов на hostcms (хостцмс) - skype: varkolak1, тел: 89675012935, e-mail: anton.yurzanov@gmail.com
B
На сайте с 14.07.2006
Offline
71
blagoy
#2
Varkolak:
дивы не поддерживают вертикальное выравнивание

vertical-align:bottom;? Это я уже понял. Но есть же наверное способ обойтись без него.

lazio
На сайте с 05.10.2006
Offline
47
lazio
#3

способ которым пользуюсь в подобных ситуациях:

То, что необходимо выровнять, забиваем в еще один div (можно использовать и др. теги, например, p). Для этого элемента указываем - position:absolute; left:0; bottom:0; width:100%;. А для родительского блока приписываем position:relative.

Таким образом мы прибиваем содержимое к нижней части родительского блока =) Для того что бы добиться нужного эфекта, нужно будет поиграться с padding, margin.

COMFI - Начни Зарабатывать! (http://affiliate.comfi.ru/a2/466735/Program-Overview)
B
На сайте с 14.07.2006
Offline
71
blagoy
#4
lazio:
Для этого элемента указываем - position:absolute; left:0; bottom:0; width:100%;. А для родительского блока приписываем position:relative.

Частично работает этот способ, но если количество строк текста будет &#8800; 2 то верстка поедет. 

<html><head><style type="text/css"><!--

#p {position:absolute; left:0; bottom:0; padding:0; margin: 0 0 -140px 0;}



.vazhno {position: relative;

clear: both;

display:inline-block;

margin: -5px 0 5px -5px;}



.vazhno div {position: relative;

float: left;

width: 250px;

height: 190px;

margin: 5px 0 0 5px;}



.vazhno div h2 {font-size:18px; line-height:23px; padding:3px;}

.vazhno div h2 a:visited,

.vazhno div h2 a:link {background: #003366;  color:#CDD7FC; text-decoration:none; padding:0 3px;}

.vazhno div h2 a:hover {background: #3399FF; color:#CDD7FC; text-decoration:none; padding:0 3px;}

--></style></head>



<body>

<div class="vazhno">

        <div style="background-image: url(http://img-fotki.yandex.ru/get/7/blagoy1.0/0_6b4c_8d820f71_L);"><div id="p"><h2><a href="/">Павел Румянцев*— седьмой «международник»</a></h2></div></div>

        

        <div style="background-image: url(http://img-fotki.yandex.ru/get/7/blagoy1.0/0_6b4c_8d820f71_L);"><div id="p"><h2><a href="/">Павел Румянцев*— седьмой «международник» Павел Румянцев*— седьмой «международник»</a></h2></div></div>

</div>

</body></html>
lazio
На сайте с 05.10.2006
Offline
47
lazio
#5
blagoy:
Частично работает этот способ, но если количество строк текста будет &#8800; 2 то верстка поедет.

у вас для внутреннего блока была прописана высота 190пикс.

вобщем смотрите как нада=) 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head><style type="text/css"><!--

#p {position:absolute; left:0; bottom:0; padding:0; margin: 0 0 0 0; height:auto;}



.vazhno {

clear: both;

display:inline-block;

margin: -5px 0 5px -5px;}



.vazhno div {

position: relative;

float: left;

width: 250px;

height: 190px;

margin: 5px 0 0 5px;}



.vazhno div h2 {font-size:18px; line-height:23px; padding:3px;}

.vazhno div h2 a:visited,

.vazhno div h2 a:link {background: #003366;  color:#CDD7FC; text-decoration:none; padding:0 3px;}

.vazhno div h2 a:hover {background: #3399FF; color:#CDD7FC; text-decoration:none; padding:0 3px;}

--></style></head>



<body>

<div class="vazhno">

        <div style="background-image: url(http://img-fotki.yandex.ru/get/7/blagoy1.0/0_6b4c_8d820f71_L);"><div id="p"><h2><a href="/">Павел Румянцев*— седьмой «международник»</a></h2></div></div>

        

        <div style="background-image: url(http://img-fotki.yandex.ru/get/7/blagoy1.0/0_6b4c_8d820f71_L);"><div id="p"><h2><a href="/">Павел Румянцев*— седьмой «международник» Павел Румянцев*— седьмой «международник»</a></h2></div></div>

</div>

</body></html>
B
На сайте с 14.07.2006
Offline
71
blagoy
#6

lazio, спасибо большое!

Givandos
На сайте с 25.06.2007
Offline
33
Givandos
#7

lazio

Да, супер. Только что на работе проверил на сайте, который доделываю - получилось :)

До этого из-за постоянной спешки с работе пришлось по-быстрому ограничится рисованием таблицы с одной ячейкой, ну а в ней уже выравнивание по нижнему краю! Работало, но меня так не устраивало!

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий