css – 垂直对齐浮动div

我试图浮动两个不同字体大小的div。我找不到一个方法来对齐在同一基线上的文本。这是我一直在努力：

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

解决方法

好吧，首先是纯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样式。