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

71

blagoy

12 октября 2008, 11:59

17069

Сверстал кусок сайта с минимальным использованием кода, не получается выровнять текст в 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>

174

Varkolak

12 октября 2008, 12:38

#1

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

html/css/js верстка и разработка сайтов на hostcms (хостцмс) - skype: varkolak1, тел: 89675012935, e-mail: anton.yurzanov@gmail.com

B

71

blagoy

12 октября 2008, 12:41

#2

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

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

47

lazio

12 октября 2008, 13:10

#3

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

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

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

COMFI - Начни Зарабатывать! (http://affiliate.comfi.ru/a2/466735/Program-Overview)

Скрыть важный для поисковиков В Google Maps теперь Google AdSense улучшил адаптивные

B

71

blagoy

12 октября 2008, 13:34

#4

lazio:
Для этого элемента указываем - position:absolute; left:0; bottom:0; width:100%;. А для родительского блока приписываем position:relative.

Частично работает этот способ, но если количество строк текста будет ≠ 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>

47

lazio

12 октября 2008, 14:18

#5

blagoy:
Частично работает этот способ, но если количество строк текста будет ≠ 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

71

blagoy

12 октября 2008, 14:23

#6

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

33

Givandos

13 октября 2008, 07:46

#7

lazio

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

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

Курс биткоина превысил $50 тысяч

Тренды маркетинга в 2024 году: мобильные продажи, углубленная аналитика и ИИ