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

参见此工作示例

http://jsfiddle.net/wRbax/19/

用div替换span

Answer 2

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

display：block;

http://jsfiddle.net/LMgRa/

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

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

将浮动跨度定位在容器的底部

2 个答案: