垂直alignment浮动div
我想浮动两个不同的字体大小的div。 我找不到在同一基线上alignment文本的方法。 这是我一直在尝试的：
<div id="header"> <div id="left" style="float:left; font-size:40px;">BIG</div> <div id="right" style="float:right;">SMALL</div> </div> 好吧，首先是纯粹的CSS方式。 你可以使用相对+绝对定位来获得垂直alignment，如下所示：
<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索引问题。
另外，根据所有的元素是否需要绝对定位，你可能需要开始做明确的指定包含元素的高度，这通常是不可取的。 理想情况下，您希望容器为其子项自动resize。
问题是不同大小的字体的基线不匹配，我不知道这样做的“纯粹的”CSS方式。
然而，使用表格解决scheme是微不足道的 ：
<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样式。
编辑只是重新阅读的问题，看到一个框需要漂浮在右边…所以下面不工作…但可能是适应性的
首先，你应该使用跨度，而不是divs，因为内容将被内联完成。 我不知道原因的来龙去脉，但是这意味着你的元素会在浏览器中performance得更友善些。
一旦你这样做了，即使在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>
您可以使用行高来做到这一点，但它只适用于内联元素，如果文本不换行。
<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>
我改变了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>
你的意思是印刷意义上的基准吗？ （也就是说，每行文本与另一列中的相应行alignment）。如果是这种情况，字体大小需要是对方的倍数 – 例如12和18px（1：1.5）。
如果你的意思是divs需要是同一个高度，那么做这件事不是一个简单的方法。 您可以手动设置高度（高度：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>
如果你将正确的浮动div放在HTML左边的浮动div之前，它们将垂直排列。
或者，你可以浮动两个div左 – 这是完全有效的 – 大多数CSSdevise是如何编码的。
