Question

我怎么能强制跨度到桌子底部？

我有这段代码：

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

我想强制cat-hinta始终位于td的底部。我怎么能这样做？我需要它，因为我希望产品价格始终在表的底部，因此它不依赖于产品标题（可能是1-3行）。

编辑：

Fancy的代码不起作用。这是我的整个代码:( 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;
}

编辑2

我尝试过Jeaffrey的代码但对我来说似乎太复杂了。所以，我如何嵌入mu是这个脚本中的用户代码太短：

<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/

如何强制跨度为表td的底部

编辑2

2 个答案: