html - 如何让 2 div 的文本沿底部对齐？

Question

我正在设计一个联系页面，并希望有 2 列，一列带有标签(例如 facebook、twitter)，一列带有实际详细信息。问题是我希望两条线(具有不同大小的文本)都沿底部边缘对齐。

如果我给你看可能会更容易:http://goonbee.com/contact

目前，标签和详细信息沿中心垂直对齐。我怎样才能让它们沿着底部对齐？

我的 CSS 是:

#contactbox {
    display: block;
    margin-top: 25px;
}

#contactboxlabels {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    color: #c9c9c9;
    line-height: 42px;
    text-align: right;
    float: left;
    padding: 0;
    margin: 0;
}

#contactboxdetails {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 35px;
    color: #545454;
    line-height: 42px;
    text-align: left;
    vertical-align: bottom;
    float: left;
    padding: 0;
    margin: 0;
    margin-left: 15px;
}

我的 HTML:

<div id="contactbox">
    <div id="contactboxlabels">
        <span>email<br />twitter<br />facebook<br />phone</span>
    </div>

    <div id="contactboxdetails">
        <span><a href="mailto:x@x.com">x@x.com</a><br /><a href="http://twitter.com/goonbee">@goonbee</a><br /><a href="http://facebook.com/goonbee">facebook.com/goonbee</a><br /><a href="tel:+44000000">+44 000000</a></span>
    </div>

    <div style="clear:both"></div>
</div>

Answer 1

目前，您在一个容器中有标签，在另一个容器中有值。这将使它更难使用，并且也没有语义和意义。

将每个标签和值放在自己的容器中。你最终会得到 4 对标签/值。

给容器 position:relative; 然后使用 position:absolute; 作为标签和值。只要两者的底部都是 0，那么它们都应该沿底部边缘对齐。