CSS-垂直对齐浮动div

我正在尝试使用不同的字体大小浮动两个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 asked 2020-02-21T15:54:43Z
5个解决方案
42 votes

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

cletus answered 2020-02-21T15:55:23Z
9 votes

编辑只是重新阅读了问题,发现一个框需要向右浮动...因此下面的内容不起作用...但可能具有适应性

首先,您应该使用跨度而不是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 answered 2020-02-21T15:55:53Z
1 votes

您可以使用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>
Emily answered 2020-02-21T15:56:18Z
0 votes

您是指印刷意义上的基线吗? (也就是说,文本的每一行都与另一列中的相应行处于同一水平)。如果是这种情况,则字体大小必须是彼此的倍数,例如12和18px(1:1.5)。

如果您表示div的高度必须相同,则没有简单的方法可以做到这一点。 您可以手动设置高度(height:100px;),或使用javascript来调整一个高度作为其他更改。

或者,您可以通过将两个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 answered 2020-02-21T15:57:01Z
-2 votes

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

另外,您也可以将两个div都向左浮动-完全有效-以及大多数CSS设计的编码方式。

iblamefish answered 2020-02-21T15:57:27Z
translate from https://stackoverflow.com:/questions/1022795/vertically-align-floating-divs