如何使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则它们都应沿底部边缘对齐。

Answer 2

<div>
    <div style="float: left; width: 75px; text-align: right; padding-right: 10px; padding-top:15px;">email</div>
    <div><a href="mailto:touch@goonbee.com">touch@goonbee.com</a></div>
</div>

要么...

<div>
    <span style="vertical-align: bottom; padding-right: 10px;">email</span>
    <a href="mailto:touch@goonbee.com">touch@goonbee.com</a>
</div>

Answer 3

首先，您的标记不是很语义化。 键属于它们的值，它们不是独立的列。 这将是最语义，最少的标记：

<dl>
  <dt>email</dt>    <dd>touch@goonbee.com</dd>
  <dt>twitter</dt>  <dd>@goonbee</dd>
  <dt>facebook</dt> <dd>facebook.com/goonbee</dd>
  <dt>phone</dt>    <dd>+44 7825 163256</dd>
</dl>

对于此样式，唯一的缺点是您需要显式设置dt “列”的宽度以使其对齐：

dl { font-family: Arial, Helvetica, sans-serif; }

/* column layout */
dt {
  float: left;
  clear: left;
  width: 4.25em; /* needs to be set for longest item */
  margin: 0 1em 0 0;
}

dd {
  overflow: hidden; /* creates an implicit column from remaining space */
}

然后，您可以在dt上调整line-height ，并添加padding-top以保持高度相同并与基线匹配：

/* typography */
dt {
  font-size: 17px;
  line-height: 29px; /* 42 - padding-top */
  padding-top: 13px; /* ceil( (42 - font-size) / 2 ) */
  color: #c9c9c9;
  text-align: right;
}

dd {
  font-size: 35px;
  line-height: 42px;
  color: #545454;
  text-align: left;
}

另外，如果您不想设置左列的宽度并使它根据最长的元素（如表格列）对齐，请使用表格！ 这也将使您更好地控制vertical-align 。 我不认为一个表是不恰当这里，特别是如果你标记左列为th标头。