垂直对齐浮动的div

Question

垂直对齐浮动的div

48

我正在尝试将两个具有不同字体大小的div浮动。我找不到一种方法来将文本对齐在相同的基线上。这是我一直尝试的:

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

- chellmuth

5个回答

9

编辑刚刚重新阅读了问题，并看到有一个框需要向右浮动... 因此下面的代码不起作用... 但可能是可适应的。

首先，您应该使用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>

- wheresrhys

2

+1，谢谢 - 我刚把我的浮动段落改成了内联块状的跨度，确实有效！ - halfer

1

您可以使用行高来实现此操作，但它仅适用于内联元素，并且文本不换行。

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

- Emily

0

您是指排版上的基线吗？（也就是说，每行文本与另一列中相应行的文本水平对齐）如果是这种情况，字体大小需要彼此成倍数关系--例如，12和18像素（1:1.5）。

如果您是指div需要具有相同的高度，则没有简单的方法可以实现。您可以手动设置高度（height:100px;），或者使用JavaScript在一个div更改时调整另一个div的高度。

或者，您可以通过将两个div包含在一个容器中，并为容器应用模拟列外观的背景样式，将其设置为垂直重复，从而伪造相同的高度。这样，您就可以获得虚假的列。有关详细信息，请参见经典A List Apart文章。

您是指您有两段文本，都需要位于列的底部吗？（抱歉，还不能发布图片）

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

- Matt Hampel

3

我不知道你原本想要表达什么，但是18不是12的整数倍，反过来说，任何数都不是12的整数倍。 - ijw

这个评论有点神秘，但我认为他的意思是它们需要共享一个公因数，而在这种情况下，这个公因数将是6。 - Isochronous

-2

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

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

- iblamefish

这并不能帮助他们在基线上匹配，这才是问题所在（我也犯了同样的错误，直到我重新阅读它）。 - cletus

我也是这么想的！ - Ryan Florence

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cletus · Accepted Answer

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