垂直对齐浮动div

-2

如果你把正确的浮动div放在HTML中的左浮动div之前，它们会垂直排列。

或者，你可以浮动两个div左 - 这是完全有效的 - 以及大多数CSS设计是如何编码的。

来源

2009-06-20 23:34:25 iblamefish

+0

这并不能帮助他们在基线匹配匹配，这是一个问题（我犯了同样的错误直到重读它）。 – cletus 2009-06-20 23:45:28

+0

我也是这么想的！ – 2009-06-21 04:25:57

42

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

来源

2009-06-20 23:36:32 cletus

+0

大部分是同样的。我更喜欢在容器上定义高度而不是求助于表格，但我主要是通过Web应用程序开发，其中整个臭味布局已经完全定位。我不希望IE6与之斗争，除非有其他一些废话:) – 2009-06-21 04:25:14

+4

如果你想对齐文本基线，我不明白你可以做什么比使用表。 div内的东西基本上彼此独立，跨越不能无缝对齐。当表错误时使用表是错误的，当它们是正确的时候使用表是正确的。但是，当它们是唯一有效的工具时使用它们在我的书中完全可以接受。 – ijw 2009-09-01 17:06:50

0

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

如果你的意思是divs需要相同的高度，那么这样做并不容易。您可以手动设置高度（高度：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>

来源

2009-06-20 23:50:41

9

编辑只是重新阅读题目，看见一个箱子需要浮动的权利... ...所以下面不工作...但也许是适应

首先，您应该使用跨度而不是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>

来源

2009-06-21 11:57:44 wheresrhys

1

你可以做到这一点使用的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>

来源

2009-06-21 11:58:50 Emily

垂直对齐浮动div

回答

相关问题