[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Прижать Div к низу ячейки таблицы
SerginhoLD
user posted image

Вообщем вопрос в названии темы.
Я пробовал уже и vertical-align:bottom;, и bottom:0; и с position крутил, никак не получается


<table class="mes" cellpadding="0" cellspacing="0">
<tr>
<td
class="mes_avatar">
<div><img
src="vagner.jpg"></div>
</td>
<td>
<div
class="mes_date">13:48 / 30 декабря 2010<img src="img/edit_message.png" title="Редактировать"><img src="img/delete_message.png" title="Удалить"></div>
<div
class="mes_author">Пупуин Василь Иванович</div>
<div
class="mes_text">
text
</div>
<div
class="mes_com_count">Комментарии: 5</div>
</td>
</tr>
</table>



.mes { border-bottom:1px solid #CCC; width:100%; padding:5px;}
.mes td.mes_avatar { width:70px;}
.mes td { vertical-align:top;}
.mes_avatar div { position:relative; overflow:hidden; width:70px; height:70px;}
.mes_avatar div img { position:absolute;}
.mes_date { float:right; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:10px; color:#666; margin:3px 10px 0px 0px;}
.mes_date img { width:14px; vertical-align:middle; cursor:pointer; margin-left:5px;}
.mes_author { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:14px; color:#09F; font-weight:bold; margin-left:5px;}
.mes_text { font-family:Tahoma, Geneva, sans-serif; font-size:12px; color:#333; padding:2px 7px;}
.mes_com_count { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:10px; color:#666; margin-left:5px;}




Спустя 12 минут, 44 секунды (30.12.2010 - 19:34) inpost написал(а):
vertical-align: bottom. Если не поможет для DIV, примени к таблице.

Спустя 4 минуты, 45 секунд (30.12.2010 - 19:39) SerginhoLD написал(а):
inpost
я ж написал что к Div'у vertical-align: bottom не работает.

а если я ко всей таблице применю, то у меня всё вниз поедит

Спустя 7 минут, 19 секунд (30.12.2010 - 19:46) inpost написал(а):
А зачем ко всей таблице? Сделай высоту таблицы относительно родительского элемента 100%, внутри таблицы примени стиль к одной ячейке!

Спустя 21 минута, 14 секунд (30.12.2010 - 20:07) Guest написал(а):
inpost
ты код смотрел?
вторая ячейка td:
у нее vertical-align: top, т.к. по умолчанию в таблице все по центру
в нутри нее много разных Div
т.к. аватарка будет длиннее(70px задано, не меньше, не больше), если текст сообщения в одну-две строки
то я хочу последний Div с классом mes_com_count прижать к низу ячейки
так что, что к чему 100% ставить я тебя не понимаю, так как ты советуешь, если я правильно понял, нужно еще ячейку создавать, а мне этого делать не хочется, не люблю я таблицы из лабиринтов

Спустя 1 минута, 2 секунды (30.12.2010 - 20:08) SerginhoLD написал(а):
ой, то что вверху я писал =)

Спустя 6 минут, 14 секунд (30.12.2010 - 20:15) inpost написал(а):
SerginhoLD
Либо таблицу с объединением: colspan и celspan.
Либо есть второй вариант, более дурной =), как мне кажется, но меньше по коду: div родитель - postion:relative, сам же div - absolute относительно родительского дива relative, поэтому достаточно будет выставить положение: top: left: right: bottom: через CSS.

Спустя 2 минуты, 28 секунд (30.12.2010 - 20:17) inpost написал(а):
Таблица:
<tr>
<
td celspan=3>PHOTO</td><td>TITLE</td><td>DATE</td>
</
tr>
<
tr>
<
td colspan=2>TEXT</td>
</
tr>
<
tr>
<
td colspan=2 valign=bottom>COMMENT</td>
</
tr>

Спустя 9 минут, 30 секунд (30.12.2010 - 20:27) SerginhoLD написал(а):
это ваще че-то новое. Обычно Див заполняют всю доступную область,
но почему-то остается место (это ворой твой способ, див в диве):
user posted image
даже выставление высоты 100% не помогает user posted image

Лан, пойду я наверно лабиринты строить через colspan и celspan

Спустя 3 минуты, 42 секунды (30.12.2010 - 20:30) inpost написал(а):
Первый див(relative - родитель главного) должен иметь 100% высоту!!!
При этом высота должна быть задана (не утверждаю!) его родителю (тут надо проверять).


_____________
"internet explorer всех правильней отображает страницы" ©
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.