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方式。您可以使用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样式。

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

您可以使用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>

Answer 4

你的意思是印刷意义上的基线吗？（也就是说，每行文本都与另一列中的对应行保持水平）如果是这种情况，则字体大小必须是彼此的倍数 - 例如，12和18px（1：1.5）。

如果你的意思是div必须是相同的高度，那么就没有一种简单的方法可以做到这一点。您可以手动设置高度（高度：100px;），或使用javascript调整其中一个更改。

或者，您可以通过将两个div放在容器中来伪造相同的高度，然后将背景样式应用于模仿列的外观的容器，将其设置为垂直重复。这样，你得到了人造柱。要深入了解，请参阅此classic A List Apart article。

你的意思是，你有两段文字，两者都需要在列的底部吗？（对不起，还不能发布图片）

您可以使用上面的Faux Columns方法。

另一种方法是在文本中的自己的容器中设置文本。然后，绝对位于列的底部......这是一个很长的片段：

<!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>

Answer 5

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

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

垂直对齐浮动div

5 个答案: