Question

我正在设计一个联系页面，希望有两列，一个带有标签（例如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 */
}

然后，您可以调整line-height上的dt并添加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标题。

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

3 个答案: