Как заставить span быть внизу таблицы td

Question

Как я могу сделать так, чтобы span был в нижней части таблицы td?

У меня есть этот код:

<td>
    <span class='cat-otsikko'>Product title</span>
    <span class='cat-hinta'>Product price</span>
</td>

И я бы хотел, чтобы cat-hinta всегда был внизу таблицы.td.Как я мог это сделать?Мне это нужно, потому что я хочу, чтобы цена продукта всегда была в нижней части таблицы, поэтому она не зависит от названия продукта (длина может быть 1-3 строки).

РЕДАКТИРОВАТЬ:

НеобычныеКод не работал.Вот весь код, который у меня есть: (tuotteet - это класс таблицы)

.tuotteet tr{
border:1px dashed gray;
}

.tuotteet td {
width:30%;
border-right:dashed 1px gray;
border-bottom:dashed 1px gray;
padding:5px 2px 5px 2px;
border-top:dashed 1px gray;
text-align:center;
position: absolute;
}


.cat-otsikko {
font-weight:bold;
font-size:101%;
}

.cat-hinta {
font-size:108%;
color:#ED1C24;
font-weight:bold;
display:block;
bottom:0px;
position: absolute;
bottom: 0;
}

Edit 2

Я попробовал код Джеффри, но он показался мне слишком сложным.Итак, как я мог встроить му слишком короткий код пользователя в этом скрипте:

<table border="0" class="tuotteet">
<?php
$productsPerRow = 3;

for($i=0;$i<$count;$i++){
if($i % $productsPerRow == 0) { 
print"<tr>"; 
} 

$tuote = $prods[$i];
print"
<td>
    <span class='cat-otsikko'>".buildLink('prod', $tuote['id'])."</span>
    <div class='product-alaosa'>
        <span class='cat-hinta'>".price($tuote['hinta'])."</span>
        <span class='cat-kori'><a class='button green medium' href='".buildUrl("addtocart", $id)."'>Lisää ostoskoriin</a></span>
    </div>
</td>
 \n";

 if($i % $productsPerRow == $productsPerRow - 1) { 
 print"</tr>"; 
 } 

}

?>

Answer 1

Модель вертикального позиционирования CSS довольно ограничена, поэтому вам придется обходить ее.

Вы не можете использовать абсолютное позиционирование, потому что это удаляет элементы из обычного потока документов, и у вас получатся перекрывающиеся элементы, если вы не можете указать, насколько все это высоко.

Одна вещь, которую вы можете сделать, это разделить вашу отдельную ячейку на две ячейки и затем добавить rowspan="2" к остальным ячейкам в этом ряду:

<tr>
    <td class="top">
        <span class='cat-otsikko'>Product title</span>
    </td>
    <td rowspan="2">
        Short
    </td>
</tr>
<tr>
    <td class="bottom">
        <span class='cat-hinta'>Product price</span>
    </td>
</tr>

А затем используйте вертикальное выравнивание по двум ячейкам таблицы:

td.top {
    vertical-align: top;
    border: 1px solid red;
}
td.bottom {
    vertical-align: bottom;
    border: 1px solid green;
}

И демоверсия: http://jsfiddle.net/ambiguous/Es6Tn/

Это ужасно, но это сработает, и нетривиальное вертикальное выравнивание в CSS почти всегда ужасно, если только вы не хотите позиционировать все по пикселям.

Answer 2

Вы пытаетесь выровнять, например, кнопки ваших продуктов? Для достижения этой цели у вас должна быть фиксированная ширина и высота ячейки таблицы.

http://jsfiddle.net/JeaffreyGilbert/EW6Ax/