垂直对齐浮动div

Question

我试图浮动两个不同字体大小的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的方式.您可以使用相对+绝对定位垂直对齐到底部,如下所示:

<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样式.

Answer 2

编辑只是重新阅读问题,看到一个框需要浮动到右边...所以下面不起作用......但可能是适应性的

首先,你应该使用跨度而不是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>

Answer 3

如果您将 HTML 中的右侧浮动 div 放在左侧浮动 div 之前，它们将垂直排列。

或者，您可以将两个 div 向左浮动 - 这是完全有效的 - 以及大多数 CSS 设计的编码方式。