我试图浮动两个不同字体大小的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样式。
