html - 容器底部定位 float 跨度

Question

如何将 Span 放置在其容器的底部？

我目前拥有的:http://jsfiddle.net/wRbax/2/
我希望 .box 始终位于 .td

的底部

CSS

.td {
    vertical-align: top;
    color: white;
    border: 1px solid black;
}

.value {
    padding: 2px;
    text-align: center;
    background: blue;
    float: left;
}

.box {;
    padding: 2px;
    background: red;
}

HTML

<table>
    <tr>
        <td class="td">
            <span class="value">Value 1</span>
            <span class="box">X</span>
        </td>
        <td class="td">
            <span class="value">Value<br>2</span>
            <span class="box">X</span>
        </td>
    </tr>
</table>

Answer 1

您还可以将以下规则添加到 html 中的框类中:-

显示: block ；

http://jsfiddle.net/LMgRa/

但如前所述，您可以通过使用 div 来实现相同的效果。马特

更新:试试这个:- http://jsfiddle.net/LMgRa/1/