我正在尝试浮动两个具有不同字体大小的 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
好的，首先是纯 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 样式。
【讨论】：
edit 只是重新阅读问题并看到一个框需要向右浮动...所以下面不起作用...但可能会适应
首先，您应该使用 span 而不是 div，因为内容将内联完成。我不知道原因的来龙去脉，但这意味着您的元素在浏览器中的表现会更加友好。
完成此操作后，即使在 ie6 和 7 中，这也是一种享受：
#header {height:40px;line-height:40px;}
#left, #right {display:-moz-inline-stack;display:inline-block;vertical-align:baseline;width:auto;} /*double display property is fora fix for ffx2 */
#left {font-size:30px;}
#right{font-size:20px;}
<div id="header">
<span id="left">BIG</span>
<span id="right">SMALL</span>
</div>
【讨论】：
您可以使用 line-height 执行此操作，但它仅适用于内联元素并且如果文本不换行。
<div id="header" style="overflow:hidden;">
<span id="left" style="font-size:40px;">BIG</span>
<span id="right" style="line-height:48px;">SMALL</span>
</div>
我将div 更改为span。如果您想保留div，只需将display:inline 添加到您的样式中即可。
<div id="header" style="overflow:hidden;">
<div id="left" style="font-size:40px;display:inline;">BIG</div>
<div id="right" style="line-height:48px;display:inline;">SMALL</div>
</div>
【讨论】：
您是指印刷意义上的基线吗？ （即，每一行文本与另一列中的相应行处于同一水平）如果是这种情况，则字体大小需要相互成倍数——例如，12 和 18px (1:1.5)。
如果您的意思是 div 需要具有相同的高度，则没有简单的方法可以做到这一点。您可以手动设置高度（height:100px;），或者使用 javascript 来调整一个作为其他更改。
或者，您可以通过将两个 div 封装在一个容器中来假装相同的高度，然后将背景样式应用于模仿列外观的容器，将其设置为垂直重复。这样，您就会得到假列。如需深入了解，请参阅此classic A List Apart article。
您的意思是，您有两条文本，并且都需要位于列的底部？ （抱歉，还不能发图）
一种方法是使用上面的 Faux Columns 方法。
另一种方式是在自己的容器中设置文本里面的文本。然后，将两者绝对定位在列的底部......这是一个很长的 sn-p：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
.col { width:200px; float:left; }
.short { height:200px; background:#eee; margin-bottom:20px; }
.long { background:#ddd; margin-bottom:100px; /* margin equal to height of #big */ }
#container { overflow:hidden; width:400px; margin:0px auto; position:relative; border:1px solid green;}
#big, #small { position:absolute; bottom:0px; width:200px; }
#big { height:100px; background:red; }
#small { height:20px; background:green; right:0px; }
</style>
</head>
<body>
<div id="container">
<div class="col long">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col short">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</div>
<div id="big" >BIG</div>
<div id="small">small</div>
</div>
</body>
</html>
【讨论】：
如果你在 HTML 中将右浮动 div 放在左浮动 div 之前，它们会垂直排列。
或者，您可以将两个 div 都向左浮动 - 这是完全有效的 - 以及大多数 CSS 设计的编码方式。
【讨论】：