CSS顯示：表格單元格中的第一個元素不是文本時的表格中斷

我使用display：table創建嵌套行和列集合的佈局。我注意到，當表格中的第一個元素是文本以外的東西時，列的對齊似乎會中斷。誠然，我沒有測試過哪些元素導致此，但有在此的jsfiddle一個例子：http://jsfiddle.net/ekx4v/CSS顯示：表格單元格中的第一個元素不是文本時的表格中斷

代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
    #container { 
    width:200px; 
    height:200px; 
    display:table; 
    } 
    #column1 { 
    display:table-cell; 
    background-color:blue; 
    } 
    #column2 { 
    display:table-cell; 
    background-color:red; 
    } 
    </style> 
</head> 
<body> 

<div id="container"> 
    <div id="column1"> 
    Col1 
    <form> 
     <select size="2"> 
     <option>Options go here...</option> 
     </select> 
    </form> 
    </div> 
    <div id="column2">Col2</div> 
</div> 

</body> 
</html>

卸下所有「col1」文本導致第二列出去對齊。在這種情況下，不會對其他瀏覽器重現，這裏有一些截圖，在Chrome採取：

隨着「Col1中」：

correct alignment

沒有「Col1中」：

incorrect alignment

我在Firefox中得到了相同的結果。這是預期的行爲？如果是這樣，是否有解決方法，以便我不必在每個div的開頭都放置文本？

來源

2013-02-26 erock2112

這都歸結於vertical-align，默認爲baseline，這是預期的行爲，因爲您的示例具有非常不同的字母基線。實際上，如果沒有文字內容，div沒有字母基線，因此根據spec，該框的底部與父母的字母基線對齊。

值得慶幸的是很容易解決方法：

#container > div { 
    vertical-align:top; 
}

Demo

這裏有一個related answer（檢查最後一節），但你的使用情況有點不同：

簡而言之，當沒有文字內容時，您的select元素將與父母的字母基線對齊。這將推動父母的字母基線向下，因此select仍然可以放在父母的底部與父母的字母基線對齊。所有其他div s的基線仍與此基線對齊，該基線已被select推下。

通過在form元素之前添加文本內容，您的div將具有字母基線，該基線不會像select那樣推送父母的基線。所有div s的基線仍與前一種情況下父母的字母基線對齊，但是這次父母的基線尚未被推下。

這裏的2段以上的粗略示範（提防瘋狂的MS-PAINT技能）：

enter image description here

正如你所看到的，在第二個方案中，父母的基線下推所以select元素仍然可以放入父級，同時使其底部與父級的基線對齊。

vertical-align:top保存瀏覽器不必遵守這樣複雜的規則。將它應用於浮動/行內塊/表格內容時，它也可以使我們避免許多麻煩。

來源

2013-02-26 22:17:32

感謝您的詳細解答！這正是我所需要的。 – erock2112 2013-02-27 13:44:58

您還可以使用

display:block; 
float:left; 
height: 200px;

在這兩個細胞。根據我的經驗，允許div垂直對齊頂部以外的地方是使用table-cell的原因。如果你不需要，可以有更好的方式去做你想做的事。將這些顯示爲塊可讓您更好地控制文本在內部的顯示方式。

來源

2013-02-26 22:22:53 earl3s

CSS顯示：表格單元格中的第一個元素不是文本時的表格中斷

回答

相關問題