垂直對齊浮動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

回答

相關問題