css - 垂直对齐底部不起作用

Question

我认为我已经完成了 stackoverflow 上的一些示例。但这对我不起作用!这应该是一件很简单的事情。 html 结构已设置且无法更改。 CSS 是我必须走的路。我已经尝试过绝对和相对，但它无法与周围的其他代码一起使用。

<div class="div_lnd_intro">
<div class="lnd_head">
<a class="lndtitle" href="/hantverkshuset/index.php/om-hantverkshuset/nyhetsarkiv/21-arets-foeretagare-2014">Här kan alla medlemmar i vår företagsorganisation nominera till Årets företagare 2014</a>
<span class="lnd_introdate">22 augusti 2013</span>
</div>
<div class="lnd_introtxt"> Nu är det dags att nominera företag till “Årets företagare 2014”. </div>
</div>

.lnd_head {
    border: #C3C solid 1px !important;
    height: 59px !important;
}

.lnd_head a {
    vertical-align: bottom !important;
    height: 100% !important;
    display: table-cell !important;
    float: left !important;
    text-decoration: none !important;
    border: #F66 solid 1px !important;
    max-width: 75% !important;
}

span.lnd_introdate {
    vertical-align: bottom !important;
    height: 100% !important;
    display: table-cell !important;
    float: right !important;
    border: #099 solid 1px !important;
}

.lnd_introtxt {
    clear: both !important;
    float: left !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
}

http://jsfiddle.net/TheWizl/5WU2q/2/

提前致谢

/马格纳斯

Answer 1

将 display: table; 添加到您的 .lnd_head 声明 block 。从 span.lnd_introdate 和 .lnd_heada 声明 block 中删除 float 声明。