CSS 垂直对齐浮动div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1022795/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically align floating divs
提问by chellmuth
I am trying to float two divs with different font-sizes. I can't find a way to align the text on the same baseline. Here is what I have been trying:
我正在尝试浮动两个具有不同字体大小的 div。我找不到在同一基线上对齐文本的方法。这是我一直在尝试的：
<div id="header">
<div id="left" style="float:left; font-size:40px;">BIG</div>
<div id="right" style="float:right;">SMALL</div>
</div>
回答by cletus
Ok, firstly the pure CSS way. You can get vertical alignment to the bottom using relative+absolute positioninglike this:
好的，首先是纯 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>
You may have some issues with this, like IE6 behaviour as well as z-index issues with things like menus (last time I tried this my menus appeared underthe absolute content).
您可能对此有一些问题，例如 IE6 行为以及菜单等的 z-index 问题（上次我尝试此操作时，我的菜单出现在绝对内容下）。
Also, depending on whether all the elements need to be absolutely positioned or not, you may need to start doing things like specifying the height of the containing element explicitly, which is usually undesirable. Ideally, you'd want the container to auto-size for its children.
此外，根据是否所有元素都需要绝对定位，您可能需要开始做一些事情，例如明确指定包含元素的高度，这通常是不可取的。理想情况下，您希望容器为其子项自动调整大小。
The problem is that the baselines of the different-sized fonts will not match up and I don't know of a "pure" CSS way of doing this.
问题是不同大小字体的基线不会匹配，我不知道这样做的“纯”CSS 方式。
With tables however the solution is trivial:
然而，对于表格，解决方案很简单：
<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>
Try it and you'll see it works perfectly.
尝试一下，你会看到它完美地工作。
The anti-table crowd will scream blue murder but the above is the simplest, most browser-compatible way (particularly if IE6 support is required) of doing this.
反对表的人群会尖叫蓝色谋杀，但以上是最简单、最与浏览器兼容的方式（特别是如果需要 IE6 支持）。
Oh and always prefer using classes to inline CSS styles.
哦，总是更喜欢使用类来内联 CSS 样式。
回答by wheresrhys
editjust re-read the questions and saw one box needs floating to the right... so the below doesn't work... but might be adaptable
编辑只是重新阅读问题，看到一个框需要向右浮动......所以下面的不起作用......但可能是适应性的
First of all, you should be using spans rather than divs as the content is going to be inline to finish with. I don't know the ins and outs of why, but this means your elements will behave a bit friendlier across browsers.
首先，您应该使用跨度而不是 div，因为内容将被内联完成。我不知道原因的来龙去脉，但这意味着您的元素将在浏览器中表现得更友好一些。
Once you've done that, this works a treat, even in ie6 and 7:
一旦你这样做了，即使在 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>
回答by Emily
You can do this using line-height but it only works on inline elements and if the text does not wrap.
您可以使用 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>
I changed the divto span. If you want to keep divjust add display:inlineto your style.
我将其更改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>
回答by Matt Hampel
Do you mean baseline in the typographic sense? (That is, each line of text is level with a corresponding line in the other column) If that's the case, the font sizes need to be multiples of each other -- for example, 12 and 18px (1:1.5).
您是指排版意义上的基线吗？（也就是说，每一行文本都与另一列中的相应行处于同一水平）如果是这种情况，字体大小需要是彼此的倍数——例如，12 和 18px (1:1.5)。
If you mean the divs need to be the same height, there isn't an easy way to do this. You can manually set a height (height:100px;), or use javascript to adjust one as the other changes.
如果您的意思是 div 需要具有相同的高度，则没有一种简单的方法可以做到这一点。您可以手动设置高度 (height:100px;)，或者使用 javascript 调整一个高度。
Or, you can fake the same height by enclosing the two divs in a container, and then applying a background style to the container that mimics the look of the columns, setting it to repeat vertically. That way, you get faux columns. For an in-depth look, see this classic A List Apart article.
或者，您可以通过将两个 div 包含在一个容器中来伪造相同的高度，然后将背景样式应用到模仿列外观的容器，将其设置为垂直重复。这样，你就会得到假柱。如需深入了解，请参阅这篇经典的 A List Apart 文章。
Did you mean, you have two pieces of text, and both need to be at the bottom of the columns? (sorry, can't post an image yet)
你的意思是，你有两段文字，都需要在列的底部？（抱歉，现在还不能发图）
One way you can do this is using the Faux Columns method above.
一种方法是使用上面的 Faux Columns 方法。
The other way is to set up the text in its own container inside the text. Then, position both absolutely at the bottom of the columns ... here's a long snippet:
另一种方法是将文本设置在自己的文本容器内。然后，将两者绝对定位在列的底部......这是一个长片段：
<!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>
回答by iblamefish
If you put the right floated div before the left floated div in the HTML and they'll line up vertically.
如果在 HTML 中将右侧浮动 div 放在左侧浮动 div 之前，它们将垂直排列。
Alternatively, you can float both divs left - that's perfectly valid - and how most CSS designs are coded.
或者，您可以将两个 div 向左浮动 - 这是完全有效的 - 以及大多数 CSS 设计的编码方式。
