css - 垂直对齐 float div

Question

我正在尝试 float 两个具有不同字体大小的 div。我找不到在同一基线上对齐文本的方法。这是我一直在尝试的:

<div id="header">
    <div id="left" style="float:left; font-size:40px;">BIG</div>
    <div id="right" style="float:right;">SMALL</div>
</div>

Answer 1

好的，首先是纯 CSS 方式。您可以使用 relative+absolute positioning 使垂直对齐到底部像这样:

<div id="header">
  <div id="left">BIG</div>
  <div id="right">SMALL</div>
</div>
<style type="text/css">
html, body { margin: 0; padding: 0; }
#header { position: relative; height: 60px; }
#left { font-size: 40px; position: absolute; left: 0; bottom: 0; }
#right { position: absolute; right: 0; bottom: 0; }
</style>

您可能对此有一些问题，例如 IE6 行为以及菜单之类的 z-index 问题(上次我尝试此操作时，我的菜单出现在绝对内容的下方)。

此外，根据是否所有元素都需要绝对定位，您可能需要开始做一些事情，例如明确指定包含元素的高度，这通常是不可取的。理想情况下，您希望容器为其子项自动调整大小。

问题是不同大小字体的基线不匹配，我不知道有什么“纯”CSS 方法可以做到这一点。

然而，对于表格，解决方案微不足道:

<table id="header">
<tr>
  <td id="left">BIG</td>
  <td id="right">SMALL</td>
</tr>
</table>
<style type="text/css">
#header { width: 100%; }
#header td { vertical-align: baseline; }
#left { font-size: 40px; }
#right { text-align: right; }
</style>

尝试一下，您会发现它完美无缺。

反桌面人群会尖叫蓝色谋杀，但以上是最简单、最兼容浏览器的方法(特别是如果需要 IE6 支持)。

哦，而且总是喜欢使用类来内联 CSS 样式。